Question

所以我试图在这里做的是显示和隐藏div当我点击按钮但它不起作用，我不知道为什么。

script

$(document).ready(function(){

    $('article').addClass("hidden");

    $('#hide').click(function() {
    var $this = $(this);

        if ($this.hasClass("hidden")) {
            $(this).removeClass("hidden").addClass("visible");

        } else {
            $(this).removeClass("visible").addClass("hidden");
        }
    });
});

这是CSS

.hidden>div {
    display: none;
}

.visible>div {
    display: block;
}

这是HTML

<article>
    <button type="button" id="hide"></button>
    <div>
        <img />
        <img />
    </div>
</article>

Answer 1

您应该将课程hidden添加到article而不是button

var $this = $(this).parent();

选择器.hidden>div为类div的元素的第一个hidden子项添加样式。

Answer 2

您可以只隐藏隐藏的类，而不是放置if条件然后删除和添加类。

$(document).ready(function(){

  $('article').addClass("hidden");

  $('#hide').click(function() {
    $('article').toggleClass('hidden')
  });
});

参见此工作演示：Toggle class

Answer 3

$(document).ready(function(){

  $('article').addClass("hidden");

  $( '#hide' ).click(function() {

    if ( $( 'article' ).hasClass( "hidden" ) ) {

        $( 'article' ).removeClass("hidden").addClass("visible");

    } else {

        $('article').removeClass("visible").addClass("hidden");
    }

  });
});

您也可以使用切换

Answer 4

Jquery有一个隐藏和显示所选元素的toggle函数。它还具有hide和show函数，这意味着您不需要css。

$(document).ready(function(){

  // Hide the div to start with.
  $('#divToHide').hide();

  // When the button is clicked, toggle the div's visibility.
  $('#hide').click(function() {
    $('#divToHide').toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <article>
    <button type="button" id="hide">Click me to toggle the visibility of the div</button>
    <div id="divToHide">
      Hello World!
    </div>
  </article>
</body>

按钮不起作用？

4 个答案: