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

Question

请参阅fiddle , 在第二次点击背景动画后 <ul>不再出现，但是检查 CSS在 Firebug 中显示正在应用样式。有什么问题？

编辑:点击任何 <li> 后红色背景消失.

相关代码:

HTML

<div style="position: relative;" class="selectCover">
    <button>Transfer</button>
    <ul style="position: absolute; left: -34.5px; top:-15px; display:none;" value="0040346781">
        <li class="selected">CANCEL</li>
        <li data-branch="SJ">SJ</li>
        <li data-branch="SYI">SYI</li>
        <li data-branch="SZ">SZ</li>
        <li data-branch="SY">SY</li>
        <li data-branch="SE">SE</li>
        <li data-branch="SG">SG</li>
        <li data-branch="SD">SD</li>
    </ul>
</div>

CSS

.selectCover ul{
   background: red;
}
li.selected{
    background: green;
}

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});
});

Answer 1

你的 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”元素时它们都被点击了。这是由完整容器上的点击事件和单独的“li”元素上的点击事件引起的。单击“li”元素也会在完整容器上引起单击事件(因此您的第一个声明的监听器将再次触发)。

第二个问题是您将元素的高度设置为 0。slideDown() 似乎没有正确更新 DOM 高度值，因此背景以 0 高度绘制。

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

这是你的新 fiddle :

http://jsfiddle.net/64zUr/