2

- 更新 -

我有点愚蠢，子 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. 触发动画

随之而来的是没有问题，并且所有工作都按照我的意愿进行，但是当我单击lis 中的uls 时，它只会继续触发动画，这不是计划的一部分。

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

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

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

4

3 回答 3

0

只需将以下代码移到.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();
});
于 2012-07-28T15:37:49.580 回答
0

您不应在.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
})
于 2012-07-28T16:21:22.163 回答
0

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

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

于 2012-07-28T16:21:09.540 回答