jQuery 传播和多个类

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();
    });
    */

});

它实际上做的是：

1. 将组子项重置为默认顶部位置
2. 获取点击的组
3. 获取目标群体的总孩子ul的身高
4. 准备动画的距离
5. 触发动画

没有任何问题，并且一切都按我想要的方式进行，但是当我单击 li内的 uls，它只是不断地触发动画，而这不是计划的一部分。

您可能已经注意到，我注释掉了两段代码。这是我在互联网上寻找相关问题答案时发现的两种不同的控制传播的方法。但两者都没有给出好的结果。所发生的情况是传播实际上停止了，但也使其无法单击不同的组。

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

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

Answer 1

您不应在 .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
})

Answer 2

只需在.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 3

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

$('#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.