Question

在此代码之后，按钮的css仍然更改。当按钮未激活时，我想恢复正常的CSS。

的JavaScript

$('#btn1').on('click', function() {
  $("#btn1").css({color:'red'})
  $('#story').fadeToggle(400);
});

HTML

<div id="story" style="display:none;">
    My div
</div>

<input id="btn1" type="button" value="Click Here" />

Answer 1

为什么不在该按钮上添加课程？

$('#btn1').on('click', function(){
    $(this).toggleClass('active'); // If has class, removes it, otherwise, it adds that class
    $('#story').fadeToggle(400);
});

Answer 2

创建一个包含所需更改的css类，并在活动时应用它，并在非活动时将其删除。例如：

JS：

$('#btn1').on('click', function() {
    $(this).addClass('active')
    $('#story').fadeToggle(400)
});

//then when the button is 'inactive' run removeClass('active')

CSS：

.active{color:red;}

Answer 3

HTML：

<div id="story" style="display:none;">My div</div>
<input id="btn1" type="button" value="Click Here" />

jQuery的：

$('#btn1').on('click', function () {
    $(this).toggleClass('active');
    $('#story').fadeToggle(400);
});

一些CSS：

.active {
    color:#f00;
}

工作小提琴：http://jsfiddle.net/7LaeB/

更改为默认样式

3 个答案: