CSSとjQueryユニバーサルツリーメニュー

Question

ulliulという汎用ツリーメニューを作成したいと思います。そして、私はCSSを使用して、このような何か作りました：

CSS

.category-list { 
} 

.category-list li ul { 
    display: none; 
} 

.category-list li:hover > ul { 
    display: block; 
} 

HTML

<ul class="category-list"> 
    <li> 
    <a href="" title="">Category 1</a> 
    <ul> 
     <li><a href="" title="">Sub-category 1</a></li> 
     <li><a href="" title="">Sub-cateagory 1</a></li> 
     <li><a href="" title="">Sub-category 1</a></li> 
    </ul> 
    </li> 
    <li> 
    <a href="" title="">Category 2</a> 
    <ul> 
     <li><a href="" title="">Sub-category 2</a></li> 
     <li><a href="" title="">Sub-category 2</a></li> 
     <li><a href="" title="">Sub-category 2</a></li> 
    </ul> 
    </li> 
</ul> 

https://jsfiddle.net/usz9ycmj/1/

- を、私は同様の効果を作りたいのですが、上のクリックすると、現在クリックされているタブに親コンテンツが表示されます。さらに重要なのは、私にとって は、特定のアクションにクラスを追加し、削除する機能である：

.category-list li.current -- while is currently clicked (active) 

.category-list li -- removed while different li is clicked (active) 

だけで、アクティブおよび非アクティブのための2つの異なる状態を持っていliトリガー。それは色と矢印を閉じた状態から開いた状態に変えてツリーメニューを表示します - あなたはポイントを得るでしょう。

私は簡単なjqueryコードが必要です。歓迎します。

Answer 1

ここに作業コードがあります。

コメントを読んで、わからないことがある場合は教えてください。

// listen to the click event 
 
var all_items = $('.category-list>li').click(function(event) { 
 
    // stop the propagation - this will abort the function when you click on the child li 
 
    event.stopPropagation(); 
 
    var elm = $(this); 
 
    // remove the class from all the items 
 
    all_items.not(elm).removeClass('current'); 
 
    // add class if it's not the current item 
 
    elm.toggleClass('current', !elm.is('.current')); 
 
});

.category-list { 
 
} 
 

 
.category-list li ul { 
 
    display: none; 
 
} 
 

 
.category-list li.current > ul { 
 
    display: block; 
 
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
<ul class="category-list"> 
 
    <li> 
 
    <a href="#" title="">Category 1</a> 
 
    <ul> 
 
     <li><a href="#" title="">Sub-category 1</a></li> 
 
     <li><a href="#" title="">Sub-category 1</a></li> 
 
     <li><a href="#" title="">Sub-category 1</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#" title="">Category 2</a> 
 
    <ul> 
 
     <li><a href="#" title="">Sub-category 2</a></li> 
 
     <li><a href="#" title="">Sub-category 2</a></li> 
 
     <li><a href="#" title="">Sub-category 2</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

http://jsbin.com/tocewe/edit?html,css,js