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();
})

希望这有帮助。

＆＃13;

＆＃13;

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

＆＃13;

span{
  cursor: pointer;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;