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

如何在CSS更改之间切换

5 个答案: