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

How to select lowest level ul in nested ul in Javascript/ css

本文关键字：ul 嵌套 选择 Javascript css      更新时间：2023-09-26

我觉得这是一个简单的问题，我搜索了相当多，但我不能拿出一个很好的答案。

我有一堆嵌套的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或。nearest，我只是不确定具体怎么做。

提前感谢您的帮助。

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

这将工作-然而，你的想法/标记/执行是有缺陷的。没有.t1可以点击，因为它是由两个.t2组成的-因此，如果不点击.t2，点击.t1是不可能的

你的HTML也是无效的，因为<ul class='t1'>不能有另一个<ul>作为它的孩子。这里需要一些<li>

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

你可以委托并使用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/

EDIT:或者这是你想要的?问题是<ul><ul>，这是无效的标记，所以它取决于你对标记的特定部分所做的事情。

要回答这个问题(这似乎不是真正想要的，但其他人可能会遇到这个问题并寻找答案)，要找到"最低"的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;      
}
相关文章：