链式操作一般应用于导航栏,网页右侧的那一行导航,他运用了选择器里面的parent>child
,然后运用函数siblings()
。
给第一级 dom 加载点击事件,然后给点击的 dom 加载一个类,让其紧邻其后的子类dom 通过 show()
显示,其他和他处于同一级的 dom 下面的子类 dom 通过 hide()
隐藏。当然在这个过程中要加入 'siblings()' ,避免出现错误和冲突。
<li class="level1">
<a href="#none">衬衫</a>
<ul class="level2">
<li><a href="#none">短袖衬衫</a></li>
<li><a href="#none">长袖衬衫</a></li>
<li><a href="#none">短袖T恤</a></li>
<li><a href="#none">长袖T恤</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">卫衣</a>
<ul class="level2">
<li><a href="#none">开襟卫衣</a></li>
<li><a href="#none">套头卫衣</a></li>
<li><a href="#none">运动卫衣</a></li>
<li><a href="#none">童装卫衣</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">裤子</a>
<ul class="level2">
<li><a href="#none">短裤</a></li>
<li><a href="#none">休闲裤</a></li>
<li><a href="#none">牛仔裤</a></li>
<li><a href="#none">免烫卡其裤</a></li>
</ul>
</li>
$(function(){
$(".level1 > a").click(function(){
$(this).addClass("current")
.next().show()
.parent().siblings().children("a").removeClass("crrent")
.next().hide();
return false;
});
记得在写作的过程中要加入`$(function(){ });'参考'http://www.jianshu.com/writer#/notebooks/1426273/notes/1678741'