折叠下拉菜单
Posted 前端凯凯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了折叠下拉菜单相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <title>折叠</title> <style> *{ margin:0; padding: 0; } li{ list-style: none; } a{ text-decoration: none; } .page{ width: 100%; margin-top: 10px; background: #f2f2f2; } </style> </head> <body> <ul> <li class="page"> <a class="a"> 一级菜单 </a> <ul class="ul"> <li> 隐藏的二级菜单项 </li> <li> 隐藏的二级菜单项 </li> <li> 隐藏的二级菜单项 </li> </ul> </li> <li class="page"> <a class="a"> 一级菜单 </a> <ul class="ul"> <li> 隐藏的二级菜单项 </li> <li> 隐藏的二级菜单项 </li> <li> 隐藏的二级菜单项 </li> </ul> </li> <li class="page"> <a class="a"> 一级菜单 </a> <ul class="ul"> <li> 隐藏的二级菜单项 </li> <li> 隐藏的二级菜单项 </li> <li> 隐藏的二级菜单项 </li> </ul> </li> </ul> </body> <script> jQuery(function($){ $(".a").click(function(){ $(this).next(".ul").toggle().closest(".page").siblings(".page").children("ul").hide();//closest返回 .ul的第一个祖先元素，是一个.page元素： }).next("ul").hide();//.next("ul").hide();这段代码的意思是默认.a下面的ul元素隐藏； //1点击a标签； // $(this).next(".ul").toggle().closest(".page").siblings(".page").children("ul").hide(); //解释：选取当前元素的下一个元素（“.ul”）显示隐藏，然后选择（.ul）的第一个祖先元素是一个（.page）元素，（.page）元素的其他兄弟下的ul隐藏 //上面所有注释都是个人见解仅供参考 }); </script> </html>
以上是关于折叠下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章