Question

Basicllay我有一个带有一个名为.li-level-1的类的div，在里面我和列表有不同的ul。我有它设置所以当你点击一个li-level-1 div时，通过设置一个下拉动画显示该div中的ul和li，当你点击下一个时，它关闭之前打开的那个并且下一个下滑。

唯一的一点是div内部的链接似乎触发了level-1和动画上的slideUp / Down。

任何建议？

$('.sitemap_page .li-level-1').each(function(){
    $(this).find('ul.ul-level-2').hide();
    $(this).click(function(){
        var this_list = $(this);
        this_list.parent().find('.open').each(function(){
            $(this).slideUp(function(){
                this_list.find('ul.ul-level-2').addClass("open").slideDown();
            }).removeClass('open');
        });
        if(this_list.find('ul.ul-level-2.open').length == 0) {
            this_list.find('ul.ul-level-2').addClass("open").slideDown();
        }
    });
});

Answer 1

这是因为event bubbling：click元素上引发的<a>事件冒泡到其包含<div>并导致您的事件处理程序执行。

解决该问题的一种方法是使用event.target来确定事件的来源，并且只有在事件不是来自链接时才执行滑动动画：

$(this).click(function(event) {
    if (!$(event.target).is("a")) {
        var this_list = $(this);
        this_list.parent().find('.open').each(function() {
            $(this).slideUp(function() {
                this_list.find('ul.ul-level-2').addClass("open").slideDown();
            }).removeClass('open');
        });
        if (this_list.find('ul.ul-level-2.open').length == 0) {
            this_list.find('ul.ul-level-2').addClass("open").slideDown();
        }
    }
});

Answer 2

问题在于弗雷德里克吸食事件冒泡。另一种可能的解决方案是将div分为标题和内容div。保留内容中的数据并检查点击标题（不在父列表中）。这意味着重建处理程序，但代码将更清晰，并且不依赖于event.target。

在div内的链接上禁用slideDown / Up

2 个答案: