javascript手风琴下拉菜单实现代码

手风琴下拉菜单实现的效果更灵活，不同与传统的下拉菜单，本文就为大家分享一段爪哇岛描述语言手风琴下拉菜单实现代码，先看一看效果图：

具体的爪哇岛描述语言手风琴下拉菜单代码：

！DOCTYPE html html hearteta charset=' UTF-8 '标题手风琴下拉菜单效果/title脚本src=' http : js/jquery-1。11 .1 .js '/脚本样式* { margin : 0；padd : 0；} ul { list-style :无；} .nav ul { display: none}。nav ul li {宽度： 100像素文本对齐：中心；光标：指针；} .nav div { background: # 4ecc70宽度： 100像素；边框半径： 10px线高： 34px文本对齐：中心；颜色：白色；光标：指针；} .演示{/*显示：无；*/} .红色{ background : redborder-radius : 10px；}/style script $(function(){//case 1/$(').nav div ').on('click '，function(){//if(false==$(this)).下一个()。是(' :可见'){//$(').nav ul ').向上滑动(300);//}//$(这个)。下一个()。滑动切换(300);//})//大小写2 var changeType=$(' .nav ').find(' div ')；$.每个(changeType，function(){ $(this)).on('click '，function(){ if(false==$(this)).下一个()。是(' :可见'){ $(').nav ul ').向上滑动(300);} $(这个)。下一个()。滑动切换(300);}) $('.nav ul:eq(0)').show()；})var HeaLTH TYPe=$(' .导航' u ' .查找(' li') $ .每个(HeaLTH TYPe，function(){ $(this)).悬停(function(){ $(this)).addClass(')红色')。兄弟姐妹()。removeClass(“”红色');})})))})/脚本/标题dyul class=' nav ' Li div水果/div ul class='u' li香蕉/li li橘子/li li梨子/li li西瓜/li /ul /li li分区蔬菜/div ul class='u' li芹菜/li li黄瓜/li li洋葱/li li西瓜/li /ul /li li分区肉类/div ul class='u' li鸡肉/li li兔肉/li li鸭肉/li li龙肉/li /ul /li /ul/body/html以上就是为大家分享的爪哇岛描述语言手风琴下拉菜单代码，希望对大家的学习有所帮助，动手为自己的网站实现手风琴下拉菜单吧！