gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 03:50:48 25 4
gpt4 key购买 nike

请参阅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});
});

最佳答案

你的 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/

关于jQuery 高度动画导致背景颜色被忽略,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23427768/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com