Jquery嵌套列表折叠

Question

我可以帮助您进行翻译。以下是您需要翻译的内容：

我使用jQuery时遇到了折叠列表的问题：

HTML文件

<ul>
  <li class="dir">subject1
      <ul>
          <li class="dir">lab1
              <ul>
                  <li>lab1.pdf</li>
              </ul>
          </li>
          <li class="dir">lab2
              <ul>
                  <li>lab2.pdf</li>
              </ul>
          </li>
          <li class="dir">lab3
              <ul>
                  <li>lab3.pdf</li>
              </ul>
          </li>
      </ul>
  </li>
  <li class="dir">subject2
      <ul>
          <li class="dir">lab1
              <ul>
                  <li>lab1.pdf</li>
              </ul>
          </li>
          <li class="dir">lab2
              <ul>
                  <li>lab2.pdf</li>
              </ul>
          </li>
          <li class="dir">lab3
              <ul>
                  <li>lab3.pdf</li>
              </ul>
          </li>
      </ul>
  </li>
  <li class="dir">subject3
      <ul>
          <li class="dir">lab1
              <ul>
                  <li>lab1.pdf</li>
              </ul>
          </li>
          <li class="dir">lab2
              <ul>
                  <li>lab2.pdf</li>
              </ul>
          </li>
          <li class="dir">lab3
              <ul>
                  <li>lab3.pdf</li>
              </ul>
          </li>
      </ul>
  </li>
</ul>

脚本

$('.dir').click(function() {
    $(this).children().slideToggle();
});

具有“dir”类的

标签是文件夹，我只希望当单击它们时它们才会折叠。 现在，即使我使用$this，每个dir也会折叠。我做错了什么？

- dmnmlk

Answer 1

你需要使用 stopPropagation 属性。

$('.dir').click(function(e) {
    e.stopPropagation();
    $(this).children().slideToggle();
});

$('.dir').click(function(e) {
    e.stopPropagation();
    $(this).children().slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="dir">subject1
      <ul>
          <li class="dir">lab1
              <ul>
                  <li>lab1.pdf</li>
              </ul>
          </li>
          <li class="dir">lab2
              <ul>
                  <li>lab2.pdf</li>
              </ul>
          </li>
          <li class="dir">lab3
              <ul>
                  <li>lab3.pdf</li>
              </ul>
          </li>
      </ul>
  </li>
  <li class="dir">subject2
      <ul>
          <li class="dir">lab1
              <ul>
                  <li>lab1.pdf</li>
              </ul>
          </li>
          <li class="dir">lab2
              <ul>
                  <li>lab2.pdf</li>
              </ul>
          </li>
          <li class="dir">lab3
              <ul>
                  <li>lab3.pdf</li>
              </ul>
          </li>
      </ul>
  </li>
  <li class="dir">subject3
      <ul>
          <li class="dir">lab1
              <ul>
                  <li>lab1.pdf</li>
              </ul>
          </li>
          <li class="dir">lab2
              <ul>
                  <li>lab2.pdf</li>
              </ul>
          </li>
          <li class="dir">lab3
              <ul>
                  <li>lab3.pdf</li>
              </ul>
          </li>
      </ul>
  </li>
</ul>

- Mihai Alexandru-Ionut

---

工作得非常完美，我不知道这可以如此无缝地实现，你救了我的一天！ - dmnmlk

@dmnmlk，请不要忘记接受并投票支持我的答案，以帮助其他人。 - Mihai Alexandru-Ionut

你能帮我解决一个小问题吗？当你折叠所有的lab1、lab2和lab3文件夹，然后点击父文件夹（例如subject 1）时，会出现问题，因为lab1-lab3文件夹向下滑动，而父文件夹向上滑动。我的jsfiddle链接是http://jsfiddle.net/VNkM2/1660/。 - dmnmlk

请像我在帖子中所示一样使用.children()。 - Mihai Alexandru-Ionut

哦，我误读了你的回答，没有注意到，非常感谢！ - dmnmlk

Answer 2

如果你用

包裹最外层的

，那么就可以做到

。

$('div>ul>li .dir').click(function() {
    $(this).slideToggle();
});

- asdf_enel_hak

---

抱歉，我编辑了你的答案而不是我的答案。你能否拒绝？ - Mihai Alexandru-Ionut

好的，但我希望每个具有“dir”类的“li”在列表中以不同的级别折叠。 - dmnmlk

@dmnmlk，请看我的原始答案。 - asdf_enel_hak