1. 程式人生 > >js代碼風格之鏈式結構

js代碼風格之鏈式結構

div remove show js代碼 next() 縮進 child 結構 rip

<div class="box">
  <ul class="menu">
    <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">衛衣1</a></li>
        <li><a href="#none">衛衣2</a></li>
        <li><a href="#none">衛衣3</a></li>
        <li><a href="#none">衛衣4</a></li>
      </ul>
    </li>
    <li class="level1">
      <a href="#none">褲子</a>
      <ul class="level2">
        <li><a href="#none">褲子1</a></li>
        <li><a href="#none">褲子2</a></li>
        <li><a href="#none">褲子3</a></li>
        <li><a href="#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>

<!--
作者:[email protected]
時間: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代碼風格之鏈式結構