Question

- 更新 -

我有点愚蠢，孩子UL正在覆盖父列表（不透明度淡出），因此我点击它们之后无法单击这些组。哎呀！无论如何感谢帮助我的人！

jQuery传播的问题是每个人都在努力解决的问题。但是这是我的案例，我无法解决这个问题（或者我可能因为没有看到正确的地方而感到愚蠢，或者我的jQuery技能还不够理解）。

基本情况是我有一些组，在组中有几个选项。当您单击其中一个组时，将弹出选项。但是，当我单击其中一个选项时，整个弹出活动会再次触发，因为它是父项的子项，因此他会识别孩子被捕获的类。

我的HTML如下所示：

<div id="buttons">
        <ul>
            <li class="group">Group 1
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
            <li class="group">Group 2
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
            <li class="group">Group 3
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
            <li class="group">Group 4
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
        </ul>
</div>

我想这看起来很简单，我认为没有错。它只是嵌套在列表中的列表。

然后是我的jQuery代码。它看起来像这样：

$(".group").click(function(event) {

    // if ($(event.target).is('ul li ul li')) return false;

    $(".group").children("ul").animate({top: 0, opacity: 0}, 200);
    var liHeight = ($(this).children("ul").children("li").height())+20;
    var totalOptions = $(this).children("ul").children("li").length;
    var combinedHeight = totalOptions * liHeight;
    var slideIn = -(16+combinedHeight) // formula doing math on slidedistance
    $(this).children("ul").animate({
                            top: slideIn,
                            opacity: 1
                        }, 600);

    /*
    $(".link").click(function(event) {
        event.stopPropagation();
    });
    */

});

它实际上做的是：

将群组子项重置为默认顶部位置
获取点击的群组
获取目标群体的总儿童ul的高度
准备动画的距离
解雇动画

没有问题，并且所有工作都按照我的意愿进行，但是当我点击li内的ul时，它只会继续触发动画，这不是计划的一部分。

我注意到了2段代码，你可能已经注意到了。这是控制传播的两种不同方式，我发现在互联网上遇到相对问题的答案。两者都没有给出好的结果。发生的事情是传播实际上停止了，但也使它无法点击不同的组。

简而言之，这就是问题所在。我想我只需要添加一两行，但我想不出什么应该适合，几乎尝试了我想到的一切。

另外，如果你找不到任何答案，但对代码标记或其他东西有一些反馈，也欢迎（我是交互设计/网站开发的学生，所以我也很感激:)） / p>

Answer 1

只需将以下代码移到.group点击处理程序之外：

$(".link").click(function(event) {
    event.stopPropagation();
});

完整代码：

$(".group").click(function(event) {

    // if ($(event.target).is('ul li ul li')) return false;

    $(".group").children("ul").animate({top: 0, opacity: 0}, 200);
    var liHeight = ($(this).children("ul").children("li").height())+20;
    var totalOptions = $(this).children("ul").children("li").length;
    var combinedHeight = totalOptions * liHeight;
    var slideIn = -(16+combinedHeight) // formula doing math on slidedistance
    $(this).children("ul").animate({
                            top: slideIn,
                            opacity: 1
                        }, 600);
});


$(".link").click(function(event) {
   event.stopPropagation();
});

Answer 2

我建议click听众的另一种方式。如果在jQuery中使用on method - 您可以将侦听器委托给子元素。像这样：

$('#buttons').on('click', 'li', function(e){
    var li = $(this);

    if(li.hasClass('group')){
        alert('group was clicked');
    }
    else if(li.hasClass('link')){
        alert('link was clicked');
        e.stopPropagation();
    }
});

此代码的实例是 - http://jsfiddle.net/skip405/YWzxB/

注意：如果您删除stopPropagation委派中的link部分，则会看到两个提醒。首先 - link然后 - group。

Answer 3

您不应在.group项目上安装点击处理程序，而只应在切换元素上安装。

<li class="group">
    <a class="toggle">Group 2</a>
    <ul>
        <!-- contents to show & hide -->
    </ul>
</li>

$(".toggle").click(function(e) {
    $(this).next()... // to reference the ul
})

jQuery传播和多个类

3 个答案: