Question

我在寻找可折叠的HTML列表时找到了this回答和this代码示例。添加几个子级后，我的代码现在看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
    <style>
    #subj_tree ul{
      display:none;
    }
    </style> 
  </head>
<body>

<ul id="subj_tree">
    <li><span>sub name</span>
        <ul>
         <li><span> sub2* cat name</span>
            <ul>
                <li><span> sub3* cat name </span>
                    <ul>
                       <li><span> sub4 cat name </span></li>
                       <li><span> sub4 cat name </span></li>
                       <li><span> sub4 cat name </span></li>
                     </ul> 
                </li>    
                <li><span> sub3 cat name </span></li>
                <li><span> sub3 cat name </span></li>
                <li><span> sub3 cat name </span></li>
             </ul>         
         </li>
         <li><span> sub2 cat name </span></li>
         <li><span> sub2 cat name </span></li>
         <li><span> sub2 cat name </span></li>
         <li><span> sub2 cat name </span></li>
       </ul>
    </li>
</ul>
<script>
  $(function () {
    $('#subj_tree > li span').on("click", function (e) {
      var parent = $(this).parent();
      $('ul', parent).toggle();
    });
  });
</script>
</body>
</html>

第一次点击＆＃34;子名称＆＃34;在这种情况下自动扩展所有基础级别（sub2 + sub3），这不是我想要的。我希望如果只是下一个子级别（我的代码中的＃2）最初扩展，让我手动扩展级别＃3（可能是级别＃4，＃5 ......），如果需要的话。我该如何做到这一点？

可折叠列表：第一次点击时更改了行为？

0 个答案: