DEMO

Question

我正在使用slideToggle jQuery函数。它将display: none添加到元素中。

但我需要add/remove classes(.displayNone/.displayBlock）而不是将style="display:block/display:none添加到元素中。

如何实现它？。

$('button').click(function(){
    $('p').slideToggle('normal');
})

jsFiddle

Answer 1

您需要在元素的开头添加一个类，然后使用toggleClass()代替：

$('p').toggleClass('displayNone displayBlock');

<强> Working Demo

Answer 2

.toggleClass()

$('p').toggleClass('displayNone displayBlock');////Adds 'displayNone', removes 'displayBlock' and vice versa

您需要将类添加到p元素：

<p class="displayBlock">

DEMO

如果您想要动画：一起使用opicity ans transition，因为display:none不适用于transition。

以下是演示：

Transition Demo

更新

<小时/> 使用幻灯片toogle的callback功能添加和删除类的动画：

$('button').click(function(){
    $('p').slideToggle('normal',function(){ $(this).toggleClass('displayNone displayBlock');});
})

DEMO

Answer 3

Manwal的回答不包括删除display:none添加的display:block / .slideToggle()。虽然removeAttr('style')有效（如在OP的updated fiddle中），但它也会重置元素上的任何其他内联样式。

您可以重置display规则，而不会影响任何其他内联样式，方法是将其设置为''。

以下是修订版：

$('button').click(function(){
    $('p').slideToggle('normal', function() {
      $(this).css('display', '').toggleClass('displayNone displayBlock');
    });
});

从jQuery中的slideToggle中删除display：none

3 个答案:

更新

DEMO