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

li带有 class 的标签dir是文件夹，我只希望它们在单击它们时折叠。
现在我发现即使我使用$this. 我究竟做错了什么？

Answer 1

你需要使用stopPropagation财产。

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

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

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