禁用div内链接的slideDown/Up

Question

基本上，我有一个带有类名为.li-level-1的div，并且在其中有不同的ul列表。我已经设置好了当你点击li-level-1 div时，通过动画下拉显示该div内部的ul和li，并且当你点击下一个时，关闭之前打开的并向下滑动下一个。

唯一的问题是div内部的a链接似乎也会触发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();
        }
    });
});

- Luke O'Regan

Answer 1

这是因为事件冒泡：在<a>元素上触发的click事件会冒泡到它们所包含的<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();
        }
    }
});

- Frédéric Hamidi

Answer 2

问题在于事件冒泡，就像Frederic所建议的那样。另一个可能的解决方案是将您的div分成标题和内容div。在内容中保存数据，并检查标题上的点击（而不是父列表上的点击）。这意味着重建处理程序，但代码将更清晰，它不会依赖于event.target。

- freakish