點擊鏈接jQuery的

Question

我做jQuery的（家庭作業）的樣本「樹視圖」插件，但我有一點問題：這裏是代碼：

(function($){ 
    $.fn.TreeView = function() { 
     $("ul li").children().css("display","none"); 

     $("li").on("click", function() { 
       $(this).siblings().find("*").css("display", "none");  
       $(this).children().css("display", "block"); 
       $(this).children().children().css("display", "block"); 
       console.log($(this).children()[0]); 

     }); 

     $(this).on("mouseover", function() { 
      $(".hover").removeClass("hover"); 
      $(this).addClass("hover"); 
     }); 

     $(this).on("mouseout", function() { 
      $(this).removeClass("hover"); 
     }); 

     $("li").css("cursor", "pointer"); 

     return this;  
    }; 
}(jQuery)); 

樣本HTML部分：

<ul id="example-ul"> 
     <li> Item 1 
     </li> 
     <li> Item 2 
      <ul> 
       <li> Item 2.1 </li> 
       <li> Item 2.2 
        <ul> 
         <li> Item 2.2.1 </li> 
         <li> Item 2.2.2 
          <ul> 
           <li> Item 2.2.2.1 </li> 
           <li> Item 2.2.2.2 
            <ul id="asd"> 
             <li> Item 2.2.2.2.1 </li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li> 
     Item 3 

      <ul> 
       <li> Item 3.1 
        <ul> 
         <li> Item 3.3.1 </li> 
        </ul> 
       </li> 
       <li> Item 3.2 </li> 
      </ul> 
     </li> 
    </ul> 
    <!-- scripts --> 

    <script src="js/jquery.js"></script> 
    <script src="js/script.js"></script> 
    <script> 
     //Example 
     $("#example-ul").TreeView();  
    </script> 

所以我面對的問題是「鏈接」點擊，我想只顯示兒童元素（在控制檯上），但每次點擊我都會得到「以前的」子元素和新的 - 我想要可視化只有當前的。

Answer 1

我想你正在尋找的是停止事件的傳播。這可以通過將以下代碼添加到事件處理程序evt.stopPropagation()來完成。有了這個修改你的點擊處理程序是：

... 
    $("li").on("click", function (evt) { 
     $(this).siblings().find("*").css("display", "none"); 
     $(this).children().css("display", "block"); 
     $(this).children().children().css("display", "block"); 
     console.log($(this).children()[0]); 
     evt.stopPropagation(); 
    }); 
    ... 

這裏的fiddle的修改。