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类的

dir个标签是文件夹，我只希望它们在点击时折叠。
现在我知道即使我使用$this，每个目录都会崩溃。我做错了什么？

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>

Answer 2

如果你将{outest ul与div一起包裹，你可以

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

Jquery嵌套列表折叠

2 个答案: