Нажмите цепочки 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 для модификации.