我使用slideToggle
jQuery function.which将display: none
添加到元素中。
但我需要add/remove classes(.displayNone/.displayBlock
)而不是将style="display:block/display:none
添加到元素中。
如何实现这一目标?
$('button').click(function(){
$('p').slideToggle('normal');
})
发布于 2014-08-27 22:50:48
$('p').toggleClass('displayNone displayBlock');////Adds 'displayNone', removes 'displayBlock' and vice versa
您需要向p元素添加类:
<p class="displayBlock">
如果您想要动画:将
opicity
和transition
放在一起,因为display:none
不与transition
一起工作。
下面是演示:
更新
动画添加和删除类的callback
函数的幻灯片:
$('button').click(function(){
$('p').slideToggle('normal',function(){ $(this).toggleClass('displayNone displayBlock');});
})
发布于 2014-08-27 22:50:17
发布于 2016-07-07 21:53:06
Manwal的回答不包括删除display:none
/ display:block
,.slideToggle()
补充道。虽然removeAttr('style')
可以工作(如OP的更新小提琴),但它也会重置元素上的任何其他内联样式。
通过将display
规则设置为''
,可以在不影响任何其他内联样式的情况下重置它。
以下是一个修订版:
$('button').click(function(){
$('p').slideToggle('normal', function() {
$(this).css('display', '').toggleClass('displayNone displayBlock');
});
});
https://stackoverflow.com/questions/25542441
复制相似问题