Question

我想让#test元素显示：block;点击#button元素后。如果我再次点击，我希望#test元素显示：none;。

<body>
    <div id="content-wrapper">
        <!-- header -->
        <header id="top">
            <!--- Nav-bar -->
            <div id="button">   
            </div>
        </header>
        <div id="test">

这是我的jQuery代码：

$(function() {
    $('#button').on('click', function () {
        if ($('#test').css("display","block")) {
            $('#test').css("display","none");
        } else {
            $('#test').css("display","block"); 
        }
    });            
});

我不知道为什么它不起作用！

Answer 1

.toggle()没问题 - 但是使用css类可以让你更好地控制（比如将来使用CSS转换）（停止内联样式，但做同样的工作）

CSS

#test { display:none; }
#text.on { display:block; }

<强> JS / JQUERY

  $('#button').on('click', function () {
     $('#test').toggleClass('on');
  });

Answer 2

使用.toggle()

显示或隐藏匹配的元素。

 $(function () {
     $('#button').on('click', function () {
         $('#test').toggle();
     });
 });

if ($('#test').css("display","block")) {

您将display设置为block而非检查，因此始终为真。

<小时/> 如果条件应该是[FYI]

if ($('#test').css("display") == "block") {

Answer 3

只是一个小小的改变

$(function() {
    $('#button').on('click', function () {
        if ($('#test').css("display") === "block") {
            $('#test').css("display","none");
        } else {
            $('#test').css("display","block"); 
        }
    });            
});

尽管使用jQuery toggle（）函数可以节省一些时间。

我的JQuery函数有什么问题？

3 个答案: