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手风琴下拉菜单代码,希望对大家的学习有所帮助,动手为自己的网站实现手风琴下拉菜单吧!
javascript倒计时效果实现
本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果。1、简单时间显示讲解日期
javascript发送短信验证码实现代码
本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下:实现点击发送验证码按钮后,按钮依次显示为59秒后重试
javascript伸缩菜单栏实现代码分享
本文实现了点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来。具体代码如下!doctypehtmlhtmllang="en"headmet