这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
手风琴效果的下拉菜单大家都有见到过吧,实现的方法也有很多,这篇文章就为大家分享了 javascript 手风琴下拉菜单实现代码,纯手写的,感兴趣的朋友不要错过。
手风琴下拉菜单实现的效果更灵活,不同与传统的下拉菜单,本文就为大家分享一段 javascript 手风琴下拉菜单实现代码,先看一看效果图:
具体的 javascript 手风琴下拉菜单代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- 手风琴下拉菜单效果
- </title>
- <script src="js/jquery-1.11.1.js">
- </script>
- <style>
- *{ margin: 0; padding: 0; } ul{ list-style: none; } .nav ul{ display:
- none; } .nav ul li{ width: 100px; text-align: center; cursor: pointer;
- } .nav div{ background: #4ecc70; width: 100px; border-radius: 10px; line-height:
- 34px; text-align: center; color: white; cursor: pointer; } .demo{ /* display:
- none;*/ } .red{ background:red; border-radius: 10px; }
- </style>
- <script>
- $(function() {
- //case 1
- // $('.nav div').on('click',function(){
- // if(false==$(this).next().is(':visible')){
- // $('.nav ul').slideUp(300);
- // }
- // $(this).next().slideToggle(300);
- // })
- //case 2
- var changeType = $('.nav').find('div');
- $.each(changeType,
- function() {
- $(this).on('click',
- function() {
- if (false == $(this).next().is(':visible')) {
- $('.nav ul').slideUp(300);
- }
- $(this).next().slideToggle(300);
- }) $('.nav ul:eq(0)').show();
- }) var hoverType = $('.nav .u').find('li') $.each(hoverType,
- function() {
- $(this).hover(function() {
- $(this).addClass('red').siblings().removeClass('red');
- })
- })
- })
- </script>
- </head>
- <body>
- <ul class="nav">
- <li>
- <div>
- 水果
- </div>
- <ul class="u">
- <li>
- 香蕉
- </li>
- <li>
- 橘子
- </li>
- <li>
- 梨子
- </li>
- <li>
- 西瓜
- </li>
- </ul>
- </li>
- <li>
- <div>
- 蔬菜
- </div>
- <ul class="u">
- <li>
- 芹菜
- </li>
- <li>
- 黄瓜
- </li>
- <li>
- 洋葱
- </li>
- <li>
- 西瓜
- </li>
- </ul>
- </li>
- <li>
- <div>
- 肉类
- </div>
- <ul class="u">
- <li>
- 鸡肉
- </li>
- <li>
- 兔肉
- </li>
- <li>
- 鸭肉
- </li>
- <li>
- 龙肉
- </li>
- </ul>
- </li>
- </ul>
- </body>
- </html>
以上就是为大家分享的 javascript 手风琴下拉菜单代码,希望对大家的学习有所帮助,动手为自己的网站实现手风琴下拉菜单吧!
来源: http://www.phperz.com/article/17/0409/268768.html