首页 > 代码库 > js代码风格之链式结构
js代码风格之链式结构
<div class="box">
<ul class="menu">
<li class="level1">
<a href="http://www.mamicode.com/#none">衬衫</a>
<ul class="level2">
<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">
<a href="http://www.mamicode.com/#none">卫衣</a>
<ul class="level2">
<li><a href="http://www.mamicode.com/#none">卫衣1</a></li>
<li><a href="http://www.mamicode.com/#none">卫衣2</a></li>
<li><a href="http://www.mamicode.com/#none">卫衣3</a></li>
<li><a href="http://www.mamicode.com/#none">卫衣4</a></li>
</ul>
</li>
<li class="level1">
<a href="http://www.mamicode.com/#none">裤子</a>
<ul class="level2">
<li><a href="http://www.mamicode.com/#none">裤子1</a></li>
<li><a href="http://www.mamicode.com/#none">裤子2</a></li>
<li><a href="http://www.mamicode.com/#none">裤子3</a></li>
<li><a href="http://www.mamicode.com/#none">裤子4</a></li>
</ul>
</li>
</ul>
</div>
<script>
$(".level1>a").click(function(){
$(this).addClass("current")
.next().show()
.parent().siblings().children("a").removeClass("current")
.next().hide();
return false;
});
</script>
<!--
作者：1543177490@qq.com
时间：2017-07-02
描述：(1)对于同一个对象不超过3个操作的，可写成一行，
如：$("li").show().unbind("click");
(2)对于同一对象的较多操作，建议每行写一个
如：$(this).removeClass("mouse")
.addClass("cat")
.stop()
.fadeTo("fast",0.6)
.fadeTo("fast",1)
.unbind("click")
.click(function(){
//to do
});
(3)对多个对象少数操作，可以每个对象写一行，如果有子元素，可以缩进
如：$(this).removeClass("mouse")
.addClass("cat")
.childer("li").show().end()
.siblings().removeClass("over")
.childer().hide();
-->
js代码风格之链式结构