首页 > 代码库 > jQuery链式选择器方法-导航
jQuery链式选择器方法-导航
利用vs新建一个空白web项目，
再用nuget安装jQuery 1.x最新版，目前是 jQuery 1.12.4
新建一个html页面
再将jquery.js拖进新建的页面的头部
最后的html页面代码如下：
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8"/> <style> .current { background-color: red; } </style> <script src="http://www.mamicode.com/Scripts/jquery-1.12.4.min.js"></script></head><body> <h1>功能：导航</h1><p> 描述：点击分类展开子类，同时收起其它分类，并高亮当前点击的分类</p><div class="box"> <ul class="menu"> <li class="level1" id="第一个分类的li"> <a href="http://www.mamicode.com/#none">衬衫</a> <ul class="level2" id="第一个分类的子类ul"> <li><a href="http://www.mamicode.com/#none">短袖衬衫</a></li> <li><a href="http://www.mamicode.com/#none">长袖衬衫</a></li> <li><a href="http://www.mamicode.com/#none">短袖T恤</a></li> <li><a href="http://www.mamicode.com/#none">长袖T恤</a></li> </ul> </li> <li class="level1" id="第二个分类li"> <a href="http://www.mamicode.com/#none">卫衣</a> <ul class="level2" id="第二个分类的子类ul"> <li><a href="http://www.mamicode.com/#none">开襟卫衣</a></li> <li><a href="http://www.mamicode.com/#none">套头卫衣</a></li> <li><a href="http://www.mamicode.com/#none">运动卫衣</a></li> <li><a href="http://www.mamicode.com/#none">童装卫衣</a></li> </ul> </li> <li class="level1" id="第三个分类的li"> <a href="http://www.mamicode.com/#none">裤子</a> <ul class="level2" id="第三个分类的子类ul"> <li><a href="http://www.mamicode.com/#none">短裤</a></li> <li><a href="http://www.mamicode.com/#none">休闲裤</a></li> <li><a href="http://www.mamicode.com/#none">牛仔裤</a></li> <li><a href="http://www.mamicode.com/#none">免烫卡其裤</a></li> </ul> </li> </ul></div><script> //在这里写js代码 $(".level1>a").click(function() { $(this).addClass("current") //给被点击的对象(a)加个样式 .next() //a下面的ul .show() //把ul显示出来 .parent() //得到level1 第一个li .siblings() //得到level1 的地2个和第三个li .children("a") // 第二个和第三个li下的a，就是卫衣&裤子 .removeClass("current") //移除它们的选中样式 .next() // 得到level1 下的第二个和第三个ul .hide(); // 隐藏他们 });</script></body></html> 
jQuery链式选择器方法-导航
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。