我正在尝试更改选项标题 (.option-title
) 上显示的图标(.add_to_rotation
) 向上或向下切换。向下时,应显示关闭 (.retract-icon
) 按钮,向上时应显示添加 (.expand-icon
)。
我认为问题在于从调用 slideToggle
到调用它的属性从 display: hidden
更改为 display 的延迟: block
,反之亦然。
这是我的代码:
$('.option-title').click( function() {
var name = $(this).attr('id');
$('.' + name).slideToggle('slow');
if($('.' + name).css('display') == "block") {
$(this).html("Add to Rotation? <div class=\"retract-icon\">");
} else {
$(this).html("Add to Rotation? <div class=\"expand-icon\">");
}
});
if()
条件的第一部分执行得很好,所以条件必须被认为是真的,但是当再次点击时,第一个条件仍然被认为是真的,并且 的内容.option-title
不变。
我怎样才能让它按照我上面的描述工作?
如有任何帮助,我们将不胜感激 ;)。
最佳答案
我看到有两种简单的方法可以解决这个问题。
代替使用 slideToggle,首先检测条件,然后使用 slideUp 或 slideDown,这将使您的消息在幻灯片发生时出现:
$('.option-title').click( function() {
var name = $(this).attr('id');
var slider = $('.' + name); // shortcut to the element that's being slid. There's probably a better variable name you can use but I don't know the context
if(slider.css('display') == "block") {
slider.slideUp('slow');
$(this).html("Add to Rotation? <div class=\"retract-icon\">");
} else {
slider.slideDown('slow');
$(this).html("Add to Rotation? <div class=\"expand-icon\">");
}
});
或者使用回调,这意味着您的消息在幻灯片完成之前不会出现:
$('.option-title').click( function() {
var name = $(this).attr('id');
var slider = $('.' + name); // shortcut to the element that's being slid. There's probably a better variable name you can use but I don't know the context
slider.slideToggle('slow', function() {
if(slider.css('display') == "block") {
$(this).html("Add to Rotation? <div class=\"retract-icon\">");
} else {
$(this).html("Add to Rotation? <div class=\"expand-icon\">");
}
});
});
关于javascript - if($(var).css ('display' ) == "block") 与 slideToggle?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7756260/