导航菜单（动画）— jQuery
本文章实现是一个导航菜单的功能
（1）点击当前菜单显示二级菜单，再次点击收起当前菜单。
（2）当有一个二级菜单显示，点击其他菜单，上一个已点击菜单会收起。只展示当前点击的菜单，只显示一个菜单，类似手风琴的效果。
效果:
实现步骤：
1、html代码：
1 <div class="menu"> 2 <div class="nav"> 3 <!-- 一级菜单 --> 4 <ul> 5 <li> 6 <div>一级菜单A</div> 7 <!-- 二级菜单 --> 8 <ol> 9 <li>二级菜单</li> 10 <li>二级菜单</li> 11 <li>二级菜单</li> 12 </ol> 13 </li> 14 </ul> 15 <ul> 16 <li> 17 <div>一级菜单B</div> 18 <ol> 19 <li>二级菜单</li> 20 <li>二级菜单</li> 21 <li>二级菜单</li> 22 </ol> 23 </li> 24 </ul> 25 <ul> 26 <li> 27 <div>一级菜单C</div> 28 <ol> 29 <li>二级菜单</li> 30 <li>二级菜单</li> 31 <li>二级菜单</li> 32 </ol> 33 </li> 34 </ul> 35 </div> 36 </div>
2、css代码：
1 body{ 2 margin: 0; 3 } 4 ul, ol{ 5 padding: 0; 6 margin: 0; 7 list-style: none; 8 } 9 .menu{ 10 width: 1200px; 11 margin-left: 200px; 12 } 13 .nav{ 14 width: 1200px; 15 } 16 .nav ul{ 17 width: 200px; 18 } 19 .nav ul > li{ 20 width: 200px; 21 } 22 .nav ul > li div{ 23 width: 200px; 24 height: 40px; 25 /* lh40px */ 26 line-height: 40px; 27 /* bgc */ 28 background-color: #800080; 29 color: #fff; 30 /* tac */ 31 text-align: center; 32 cursor: pointer; 33 } 34 .nav ul > li > ol { 35 width: 180px; 36 margin: 0 auto; 37 background-color: #f0f0f0; 38 display: none; 39 } 40 .nav ul > li > ol li{ 41 height: 40px; 42 line-height: 40px; 43 text-align: center; 44 border-bottom: 2px solid #1E90FF; 45 } 46 .nav ul > li > ol li:hover{ 47 /* 鼠标悬浮二级菜单显示的颜色 */ 48 background-color: #9370DB; 49 }
3、脚本部分：
// 要先引入jq文件才书写自己的jq代码
1 <script src="../../jquery/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> 2 <script type="text/javascript"> 3 $(function(){ 4 // 给所有的一级菜单添加点击事件 5 $(".nav ul > li div").click(function(){ 6 // console.log(this); this指向当前点击的div(一级菜单) 7 // 当前点击的一级菜单下拉 8 $(this).parent().find("ol").slideToggle(1000) 9 // 收起菜单 slideUp() 收起 10 // jq的链式操作 11 $(this).parent().parent().siblings().find("ol").slideUp(1000); 12 // 设置一级菜单的背景颜色 13 $(".nav ul > li div").css("backgroundColor", "#800080"); 14 // 当前点击的li高亮（当前点击的菜单高亮） 15 $(this).css("backgroundColor","#1E90FF"); 16 }) 17 }) 18 </script>
文章到此结束。。。
