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