标签:child 元素 一个 rip sibling idt 解释 none 下拉
<!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>
标签:child 元素 一个 rip sibling idt 解释 none 下拉
原文地址:https://www.cnblogs.com/9608kai/p/9050787.html