点击链接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的修改。