JQueryツリーリストを展開して閉じる

Question

jqueryの新機能です。私はサブリストのリストを持っています。私はそれらのすべてに拡大/縮小機能を適用したいと思います。

HTML：

<ul class="tree-child"> 
    <li class="link"> 
     <span><a href="#">folderrename</a></span> 
     <ul> 
      <li class="link"> 
       <span><a href="#">TR</a></span> 
       <ul> 
        <li class="link"> 
         <span><a href="#">Test</a></span> 
        </li> 
       </ul> 
      </li> 
      <li class="link"> 
       <span><a href="#">movefolder</a></span> 
      </li> 
      <li class="link"> 
       <span class=""><a href="#">Rel 7.60_SOLASE</a></span> 
      </li> 
      <li class="link"> 
       <span><a href="#">TestStdFolder1</a></span> 
      </li> 
     </ul> 
    </li> 
</ul> 

私は/ +とクリックで<span><a href="#">folderrename</a></span>上崩壊し、拡大したい - アイコンを。アイコンのために私は素晴らしいフォントを使用します。

Reference Fiddle。

どのようにするには？

Answer 1

あなたはslideToggle()を使用することができます。

$('#folder_rename').on('click',function(){ 
    $(this).next('ul').slideToggle(); 
}) 

は、この情報がお役に立てば幸いです。

$('span').on('click',function(){ 
 
    $(this).next('ul').slideToggle(); 
 
    $(this).find('i').toggleClass('fa-minus fa-plus'); 
 
})

span{ 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<ul class="tree-child"> 
 
    <li class="link"> 
 
    <span id='folder_rename'> 
 
     <i class="fa fa-minus"></i> 
 
     <a href="#">folderrename</a></span> 
 
    <ul> 
 
     <li class="link"> 
 
     <span><i class="fa fa-minus"></i><a href="#">TR</a></span> 
 
     <ul> 
 
      <li class="link"> 
 
      <span><a href="#">Test</a></span> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="link"> 
 
     <span><a href="#">movefolder</a></span> 
 
     </li> 
 
     <li class="link"> 
 
     <span class=""><a href="#">Rel 7.60_SOLASE</a></span> 
 
     </li> 
 
     <li class="link"> 
 
     <span><a href="#">TestStdFolder1</a></span> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>