jquery实现下拉
Posted earlybridvic
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现下拉相关的知识，希望对你有一定的参考价值。
使用jQuery实现点击下拉与隐藏菜单
具体效果图如下：
点击的时候打开下拉菜单，同时关闭其他已经打开的下拉菜单，再次点击关闭下拉菜单；
以下是代码部分：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } .list { width: 300px; border: 1px solid black; } .li { width: 100%; height: 40px; background-color: yellow; border-bottom: 1px solid black; color: black; font-size: 20px; cursor: pointer; } .li:hover { color: red; } .else { width: 100%; display: none; } .else-list { width: 100%; height: 40px; background-color: white; border: 1px solid black; border-left: none; border-right: none; text-align: center; font-size: 20px; color: black; } .else-list:hover { color: white; background-color: blue; } .last { border-bottom: none; } .first { border-top: none; } </style> </head> <body> <ul class="list"> <li> <div class="li"> 新闻中心 </div> <div class="else"> <div class="else-list first">添加新闻</div> <div class="else-list">添加新闻</div> <div class="else-list">添加新闻</div> <div class="else-list">添加新闻</div> </div> </li> <li> <div class="li"> 关于我们 </div> <div class="else"> <div class="else-list first">添加新闻</div> <div class="else-list">添加新闻</div> <div class="else-list">添加新闻</div> <div class="else-list">添加新闻</div> </div> </li> <li> <div class="li"> 业务联系 </div> <div class="else"> <div class="else-list first">添加新闻</div> <div class="else-list">添加新闻</div> <div class="else-list">添加新闻</div> <div class="else-list">添加新闻</div> </div> </li> <li class="last"> <div class="li"> 联系我们 </div> <div class="else"> <div class="else-list first">添加新闻</div> <div class="else-list">添加新闻</div> <div class="else-list">添加新闻</div> <div class="else-list">添加新闻</div> </div> </li> </ul> <script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { $(‘.list‘).find(‘li:first-child‘).children(‘.else‘).show(); // 首行默认显示 $(".list > li").on("click", ".li", function() { $(this).next(‘.else‘).slideToggle(500); $(this).parent().siblings().children(‘.else‘).slideUp(500); $("html,body").animate({ scrollTop: 0 }, 500); }); }); </script> </body> </html>
以上是关于jquery实现下拉的主要内容，如果未能解决你的问题，请参考以下文章