Question

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

编辑：点击任何<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);
});

您的代码中存在两个问题：

点击事件出现问题。两者都点击了触发的位置，因为当您单击＆＃34; li＆＃34;元件。这是由整个容器上的click事件以及sepperate＆＃34; li＆＃34;上的点击事件引起的。元素。点击＆＃34; li＆＃34; element也会导致整个容器上的click事件（你的第一个声明的侦听器会再次触发）。

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

我将第一个点击事件放在按钮上，这样当您点击＆＃34; li＆＃34;元件。

这是你的新小提琴：

http://jsfiddle.net/64zUr/

Answer 2

您需要编辑以下代码。

在这里你尝试过使用hide或者slidup，但是它产生了问题。要解决此隐藏/滑动问题，您已使用$(e.target).parent().animate({height : 0});，这将删除背景颜色。

当您从列表中选择项目时，该单击事件将被传播到selectCover div，因此当您隐藏或制作幻灯片时它会再次变为可见。

请按照以下代码解决问题，并参阅jsfiddle

$('.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
});

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

2 个答案: