2

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

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

在此先感谢您的帮助。

4

4 回答 4

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

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

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

于 2013-03-19T23:55:49.080 回答
0

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

于 2013-03-19T23:56:20.077 回答
0

要回答这个问题（这似乎不是真正想要的，但其他人可能会偶然发现这个问题并正在寻找答案），要找到“最低”的 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;      
}
于 2013-03-20T00:26:43.903 回答
0

您可以委托并使用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>，它是无效的标记，所以它取决于你对标记的特定部分所做的事情。

于 2013-03-20T00:08:02.740 回答