jQuery点击li与嵌套ul

Question

我在列表中有一个列表.当用户单击列表项(<li>)时,我希望嵌套<ul>显示.在我开始添加嵌套列表之前,我只是在单击列表项运行函数时使用它.现在,单击任何嵌套列表也会运行该功能.这是有道理的,因为它们是列表项的一部分.

除了包装<span>列表项的第一部分并在其上运行函数之外,是否有一个选择器可以让我在父项上运行某些东西<li>而不是它的任何子项,特别是子列表和列表项？

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
    })

我想点击"群组"或"查看全部"来运行点击功能,但点击"群组1"或"群组2"不应该.

Answer 1

这是一种官方方式,但在您的情况下,它可能相当昂贵:

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

该li的孩子现在有来自向上蔓延,并触发停止事件的处理程序li的处理程序.请尝试一下,看看应用程序是否没有放慢速度.