jQuery高度动画会导致忽略背景色

请参见，在第二次单击后，

背景上的动画不再出现，但是检查firebug中的

CSS

显示正在应用该样式。有什么问题

---

编辑：单击任何

后，红色背景消失

有关守则：

HTML

jQuery

$('.selectCover').click(function(){
    $(this).find('ul').slideDown(100,function(){
        $(this).mouseleave(function(){
            $(this).slideUp(100);
            $(this).off('mouseleave');
        });
    });
});

$('.selectCover li').click(function(e){
    $.post('x').done(function(){
        console.log($(e.target).attr('data-branch'));
        $(e.target).parent().attr('currsel',$(e.target).attr('data-branch'))
    });
    $(e.target).parent().animate({height : 0});
});

---

您的javascript应该如下所示：

$('.selectCover').find('button').click(function(){
    $(this).parent().find('ul').slideDown(100,function(){
        $(this).mouseleave(function(){
            $(this).slideUp(100);
        });
    });
});

$('.selectCover li').click(function(e){
    $.post('x').done(function(){
        console.log($(e.target).attr('data-branch'));
        $(e.target).parent().attr('currsel',$(e.target).attr('data-branch'))
    });
    $(this).parent().slideUp(100);
});

您的代码中有两个问题：

您的单击事件有问题。两个侦听器都单击了触发的位置，因为它们都是在您单击“li”元素时被单击的。这是由完整容器上的单击事件和seperate“li”元素上的单击事件引起的。单击一个“li”元素也会在整个容器上引起一个click事件（第一个声明的侦听器将再次触发）

第二个问题是将元素的高度设置为0。slideDown（）似乎无法正确更新DOM高度值，因此将以0高度绘制背景

我将第一次单击事件放在按钮上，这样当您单击“li”元素时它就不会触发

这是你的新小提琴：

---

您需要编辑以下代码

在这里，您尝试过使用隐藏或向上滑动，但它产生了问题。为了解决这个隐藏/滑动问题，您使用了

$（e.target）.parent（）.animate（{height:0}），正在删除背景色

当您从列表中选择项时，单击事件将被传播以选择Cover div，因此当您隐藏或制作幻灯片时，它将再次可见

请按照以下代码解决这两个问题，并参阅

请在问题A中张贴相关代码。沃尔夫，我正在做now@Dimt，您想在从列表中选择任何项目后隐藏列表吗？或者如果列表可见并在鼠标离开后将被隐藏就可以了？@Bhushan Kawadkar从列表中选择项目后会更好，因为我有更多的底层逻辑，只需通过ajax响应填充列表，这应该在每次单击项目后反映出来。@Dimt，请查看我的答案或任何你想要的，至少现在你有问题了。我没有在你的问题中看到这一点css，但我确实在你的小提琴中看到了。动画后红色背景被忽略，我更新了问题，对不起。单击任何
后红色背景消失。我故意使用动画，因为我在slideUp（）方面有问题这在另一个问题中得到了解决，谢谢你的回答，它指出了潜在的问题。当我的解决方案生效时，我会通知你。
$('.selectCover').click(function(){
    $(this).find('ul').slideDown(100,function(){
        $(this).mouseleave(function(){
            $(this).slideUp(100);
            $(this).off('mouseleave');
        });
    });
});

$('.selectCover li').click(function(e){
    $.post('x').done(function(){
        console.log($(e.target).attr('data-branch'));
        $(e.target).parent().attr('currsel',$(e.target).attr('data-branch'))
    });
    $(e.target).parent().animate({height : 0});
});

$('.selectCover').find('button').click(function(){
    $(this).parent().find('ul').slideDown(100,function(){
        $(this).mouseleave(function(){
            $(this).slideUp(100);
        });
    });
});

$('.selectCover li').click(function(e){
    $.post('x').done(function(){
        console.log($(e.target).attr('data-branch'));
        $(e.target).parent().attr('currsel',$(e.target).attr('data-branch'))
    });
    $(this).parent().slideUp(100);
});

$('.selectCover li').click(function(e){
    e.stopPropagation(); // prevent propogation of click event to parent div
    $.post('x').done(function(){
        console.log($(e.target).attr('data-branch'));
        $(e.target).parent().attr('currsel',$(e.target).attr('data-branch'))
    });
    $(e.target).parent().slideUp(100); // removed animation as it will remove bg color, so using slideup only
});