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

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/

编辑 ：还是这是您想要的？ 问题是<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;      
}