代码之家 › 专栏 › 技术社区 › hookedonwinter

jquery用嵌套的ul单击li

jquery-click-event jquery-selectors jquery

hookedonwinter · 技术社区 · 14 年前

我有一个列表在列表中。当用户单击列表项时( <li> )我想要嵌套的 <ul> 露面。在我开始添加嵌套列表之前,我只需要单击一个列表项就可以运行一个函数。现在,单击任何嵌套列表也会运行该函数。这很有意义,因为它们是列表项的一部分。

除了包裹 <span> 围绕列表项的第一部分并在其上运行函数,是否有一个选择器允许我在父级上运行某些内容? <理工大学; 但不是它的任何子项,特别是子项列表和列表项?

HTML:

<ul class="buckets">        
    <li class="bucket">
        <img src="arrow_group_collapsed_true.png" class="arrow">
        <img src="blue_folder.png" class="folder">
        View all
    </li>

    <li class="bucket">
        <img src="arrow_group_collapsed_false.png" class="arrow">
        <img src="blue_folder.png" class="folder">
        Groups
        <ul style="display: block;">
            <li id="group_id_15036" class="group_bucket">
                <img src="arrow_group_collapsed_true.png" class="arrow">
                <img src="blue_folder.png" class="folder">
                Group 1
            </li>
            <li id="group_id_14910" class="group_bucket">
                <img src="arrow_group_collapsed_true.png" class="arrow">
                <img src="blue_folder.png" class="folder">
                Group 2
            </li>
        </ul>
    </li>
</ul>

javascript(不多,如果需要,我可以显示更多):

$( 'li.bucket' ).live( 'click',
    function()
    {
        // do stuff
    })

我想单击“Groups”或“View all”来运行单击功能,但单击“Group 1”或“Group 2”则不应。

3 回复 | 直到 14 年前

MvanGeest 14 年前

有一种正式的方式,但在你的情况下,它可能相当昂贵:

$('li.bucket *').live('click', function(event) { event.stopPropagation() });

这个 li 的子级现在将具有一个处理程序,该处理程序阻止事件向上传播并触发 锂 的处理器。请尝试一下,看看应用程序是否慢得太多。

loxxy 14 年前

您可以控制上述功能 鼠标开关 列表项&删除它 鼠标移出时 项的事件。但我不知道它对其他方法有多有效。

Jonathan Park 14 年前

我喜欢@mvangeest的解决方案,但有更好的方法来理解事件传播。当一个元素被单击时,包含的元素首先得到事件,然后在树中涓涓细流。如果我理解您的请求,您希望阻止包含的ul向树发送事件。我认为这里的视觉效果最好。

<ul>
  <li></li>
  <li onclick="ShowChildUL()">
    <ul onclick="function(event) { event.stopPropagation() }">
      <li onclick="DoSomethingFun()"></li>
      <li></li>
      </ul>
  </li>
</ul>

在这种情况下,您将看到,在中间对ul的onclick将停止向li传播。另外,event.stoppropagation()不是跨浏览器的。我推荐这个方法作为onclick函数。

function StopPropagation(e) {
  var event = e || window.event;

  [body of event handler function goes here]

  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  } 
}