如何在CSS更改之间切换

Question

我有一个按钮，当按下该按钮时会使用“ Display：None;”隐藏一个div。 如何在jquery中编写代码，使CSS属性在Display：None和Display：Block之间切换？

$('#help_btn').click(function(){
    $('#help_box').css('display', 'none');
});

当您再次单击它时

$('#help_box').css('display', 'block');

等等等等。 谢谢！

编辑：

我的CSS看起来像这样

#help_box {
    display: block;
}

和我的HTML是

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

Answer 1

您可以按照@showdev的说明切换CSS类。 或者你可以尝试这个

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

Answer 2

使用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> 

请注意，您的html代码中有错别字，您必须正确引用元素的ID。

Answer 3

您可以使用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> 

Answer 4

创建任何课程

.someclass{ display: inline}

然后切换课程

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

Answer 5

有两种常见方法：

第一个是通过检查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");
})