Question

我觉得这是一个简单的问题，我搜索了很多，但我无法得出一个好的答案。

我有一堆嵌套的UL，我已经附加到div了。我希望能够折叠我点击的UL。问题是，当您在另一个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>作为其子级。你需要一些<li>。

Answer 2

您可以使用event.stopPropagation来防止事件升级到更高级别。 http://api.jquery.com/event.stopPropagation/

Answer 3

您可以委托并使用e.target来确定点击的内容并找到$.closest()祖先UL：

标记（已更新）

<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
        <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>
    </li>
    <li class='item'>Top Item 3 is a list</li>
</ul>

<强>的jQuery

$('.t0').on('click', function click(e) {
    $(e.target).closest('ul').slideUp();
});

http://jsfiddle.net/userdude/ksVUY/

编辑：或者this更多你追求的是什么？问题是<ul><ul>，它是无效的标记，因此它取决于您对标记的特定部分所做的事情。

Answer 4

要回答这个问题（这似乎不是实际需要的，但其他人可能偶然发现问题并寻找答案），要找到“最低”的UL，你可以使用getElementsByTagName，它返回一个集合在DOM顺序中，并返回集合中的最后一个元素（如果有）：

function getLowestUL(el) {
  var uls = el.getElementsByTagName('ul');
  return uls.length? uls[uls.length - 1]  : null;      
}

如果提供的元素是UL，并且您想要返回它，如果它是最低的UL，那么：

function getLowestUL(el) {
  var isUL = el.tagName && el.tagName.toLowerCase() == 'ul';
  var uls = (el.nodeType == 1) && el.getElementsByTagName('ul');
  return (uls && uls.length)? uls[uls.length - 1]  : isUL? el : null;      
}

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

4 个答案: