如何在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;      
}