Javascript 如何在CSS更改之间切换

我有一个按钮，按下时使用“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>

帮助？

您可以按照@showdev的注释切换CSS类。或者你可以试试这个

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

---

您可以使用

toggleClass（）

切换两个类

ToggleClass逻辑是添加缺少的类，然后删除上一个类

$（'help#btn'）。单击（函数（）{
$（“#帮助框”）.toggleClass（“隐藏显示”）；
});
.show{display:inline；}
.hidden{display:none；}

改变
一些有用的信息
 
创建任何类

.someclass{display:inline}

然后切换类

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

按照其他答案的建议使用或使用


$（'help#btn'）。单击（函数（）{
$（“#帮助框”）.toggle（）；
});

一些有用的信息

帮助？
有两种常用方法：

第一种方法是检查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");

}
})

// 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");
})

第二种方法是切换修改器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");

}
})

// 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");
})

我建议使用CSS类定义那些
显示设置，然后使用jQuery的。我们也可以看到相关的HTML和CSS吗？为什么“帮助”框是内联的？