Question

我不是JQuery的专家，所以在这里。我有一个看起来像这样的HTML：

<ul class="first-class">
   <li class="second-class">
      <a href="#_">
        <i class="fa fa-plus"></i>
      </a>
      <ul class="subdirectory-class">
         <li class="second-class">
            <a href="#_">
              <i class="fa fa-plus"></i>
            </a>
            <ul class="subdirectory-class">
               <li class="second-class">
                  <a href="#_">
                     <i class="fa fa-plus"></i>
                  </a>
               </li>
            </ul>
         </li>
     </ul>
   </li>
   <li class="second-class">
      <a href="#_">
         <i class="fa fa-plus"></i>
      </a>
      <ul class="subdirectory-class">
         <li class="second-class">
            <a href="#_">
              <i class="fa fa-plus"></i>
            </a>
         </li>
     </ul>
   </li>
</ul>

所以我想做的是，当我按下+符号（fa fa-plus）来切换其子目录时。此时，当我按下+号时，所有子目录都被切换。我该如何重写此jquery代码以实现该目标？

如果我按第一个+号，则按下一个+，只有下一个子目录应打开。然后，当我按下子目录时，下一个子目录应打开，依此类推。这也适用于结束部分。

JQUERY 当前我有这个：

$(document).ready(function(){
    $(".first-class .second-class").click(function(e){
        $(".subdirectory-class", this).first().slideToggle("fast");
        $(this).children("a").toggleClass("closed open");
        e.preventDefault();
    });
});

这会隐藏每个ul接受的主菜单（css display：none），当我按它时，它将切换所有子目录。

任何帮助将不胜感激。

预先感谢

Answer 1

如果将e.stopImmediatePropagation()添加到代码中，它将按您期望的方式运行。

$(document).ready(function() {
  $(".second-class").click(function(e) {
    $(this).find(".subdirectory-class").first().slideToggle("fast");
    $(this).children("a").toggleClass("closed open");
    e.stopImmediatePropagation()
  });
});

演示

$(document).ready(function() {
  $(".second-class").click(function(e) {
    $(this).find(".subdirectory-class").first().slideToggle("fast");
    $(this).children("a").toggleClass("closed open");
    e.stopImmediatePropagation()
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="first-class">
  <li class="second-class">
    <a href="#_">1
      <i class="fa fa-plus"></i>
    </a>
    <ul class="subdirectory-class">
      <li class="second-class">
        <a href="#_">11
          <i class="fa fa-plus"></i>
        </a>
        <ul class="subdirectory-class">
          <li class="second-class">
            <a href="#_">111
              <i class="fa fa-plus"></i>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="second-class">
    <a href="#_">2
      <i class="fa fa-plus"></i>
    </a>
    <ul class="subdirectory-class">
      <li class="second-class">
        <a href="#_">22
          <i class="fa fa-plus"></i>
        </a>
      </li>
    </ul>
  </li>
</ul>

jQuery递归切换子级

1 个答案: