如何在CSS更改之间切换

$('#help_btn').click(function() {
    if($('#help_box').is(':visible')) {
        $('#help_box').css('display', 'none');
    } else {
        $('#help_box').css('display', 'inline');
    }
});

使用 toggleClass(); toggle();

$('#help_btn').click(function(){
    $('#help_box').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="help_box"><p> Some helpful info!</p></div>
<button id="help_btn">help?</button>

你可以用 toggleClass() 切换两个类。

ToggleClass逻辑是添加缺少的类并删除上一个类。

$('#help_btn').click(function(){
    $('#help_box').toggleClass("hidden shown");
});

.shown { display: inline; }
.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


  <button id="help_btn">Change</button>

  <div id="help_box"><p> Some helpful info!</p></div>

.someclass{ display: inline}

然后切换类

$('#help_btn').click(function(){
     $('#help_box').toggleClass("someClass");   
});

第一种方法是检查css属性并将其反转,如下所示:

$(".something-i-clicked").on("click", function() {

if($(".my-class").css("display") == "none") { // if display: none; is set to .my-class

  // reverse it to display: block;
  $(".my-class").css("display", "block");

} else { // it has display: block;

  // reverse it to display: none;
  $(".my-class").css("display", "none");

}
})

第二种方法是切换一个修饰符css类,可能如下所示:

// my_css_file.css
.my-class {
  display: none;
}
.d-block {
display: block;
}


// my_js_file.js
$(".something-i-clicked").on("click", function() {
// toggle the class
$(".my-class").toggleClass("d-block");
})