javascript - 如何在 Javascript/css 中的嵌套 ul 中选择最低级别 ul

Question

我觉得这是一个简单的问题，我搜索了很多，但我找不到一个好的答案。

我有一堆嵌套的 UL，我已将它们附加到 div 中。我希望能够折叠我点击的 UL。问题是，当您单击另一个 UL 内的一个 UL 时，您实际上同时单击了两者。因此，如果我单击最低层折叠并说出类似 $(this).css( 'height', '5px') 的内容，则最高级别 UL 的高度也会为 5px。希望代码能让我的问题更清楚。

<ul class=t0>
  <li class='item'>Top Item 1</li>
  <li class='item'>Top Item 2</li>
  <li class='item'>Top Item 3 is a list</li>
  <ul class=t1>
    <ul class=t2>
      <li class='item'>some <span class='val'>Thing</span></li>
      <li class='item'>something <span class='val'>else</span></li>
    </ul>
    <ul class=t2>
      <li class='item'>method : <span class='val'>GET</span></li>
      <li class='item'>uri : <span class='val'>/status</span></li>
    </ul>
  </ul>
<li class='item'>Top Item 3 is a list</li>
</ul>

因此，如果您单击 UL 类 t2，则仅 t2 会折叠，但如果您单击 t1，则 t2 都会折叠。我知道如何更改 css 和所有内容，但我只是在仅选择单击的 ul 时遇到问题。我想我可以使用 .find 或 .closest 我只是不确定到底该怎么做。

预先感谢您的帮助。

Answer 1

$('.t1, .t2').click(function(e){
  e.stopPropagation(); //prevent the event from bubbling up
  $(this).slideUp();
});

这可行 - 但是，您的想法/标记/执行有缺陷。没有.t1单击，因为它由两个 .t2 组成的 - 因此，单击 .t1不点击 .t2 是不可能的

您的 HTML 也无效，如 <ul class='t1'>不能再有<ul>作为它的 child 。你需要一些<li>就在那里。