javascript - jQuery SlideUp() 影响其他列表的 SlideDown()

标签 javascript jquery html

我遇到了一个问题。我有一些 list 项目。单击列表时,它自己的子级将打开,并且将添加 '.open' 类。单击该 '.open' 类时,该列表的子级将被隐藏。所以,我的代码是这样的:

$('body').on('click', '.list-group li a', function() {
    // hide all other child
    $('.list-group .child').hide();
    $('.list-group li a').removeClass('open');

    // Open this list's child
    $(this).addClass('open');
    $(this).parent().find('.child').slideDown();
});

$('body').on('click', '.list-group li a.open', function() {    
    // hide this list's child
    $(this).removeClass('open');
    $(this).parent().find('.child').slideUp();
});

但是,在隐藏 $(this) 列表的子项时,它会首先尝试 slideDown(),然后尝试 slideUp()!我可以理解这段代码可能是造成这种情况的原因:

// hide all other child
$('.list-group .child').hide();
$('.list-group li a').removeClass('open');

如何解决这个问题?

Fiddle Work

最佳答案

看起来您的 click 监听器在应用 .open 时两次都会触发。使用 :not .on('click', '.list-group li a') 函数中的选择器似乎可以解决此问题

$('body').on('click', '.list-group li a:not(.open)', function() {
    // ....
}

JSFiddle Link

关于javascript - jQuery SlideUp() 影响其他列表的 SlideDown(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29852288/

相关文章:

javascript - 每个图像缩略图预览的删除按钮

javascript - 为什么javascript函数不能正常运行

html - 服务器问题会导致 CSS 出现问题吗?

javascript - 如何使用 Ajax 解决 'NS_ERROR_ILLEGAL_VALUE' 错误?

javascript - jquery 多次鼠标悬停?

javascript - 在 JavaScript 中执行 While 循环

javascript - 在不使用类的情况下通过 Javascript 更改 CSS 样式是不好的做法吗?

javascript - 循环遍历表单并从对象填充

javascript - JQuery 切换动态命名对象

jquery - 带有一些文本的 div 上的 Onclick 事件