javascript - 使用 jQuery 打开和关闭 div 时遇到问题

Question

.box-one {
  border: 0.1em solid #ccc;
 }

.dropdown-info {
  display: none;
}

<div class="box-one">
  <div class="header">
    <h3 class="text-center">Sample Header</h3>
   </div>
  <div class="dropdown-info">
    <p class="text-center">Sample Text</p>
  </div>
</div>
  

如果单击另一个 div，我尝试打开和关闭一个 div，并且我尝试使用 .toggle() 和 .click() 但它不起作用。我想听听别人对此的看法。我将展示我如何尝试使用这两种方法来完成它

$(document).ready(function() {

    var descriptionOpen = false;

    if (descriptionOpen === false) {
        $('.header').click(function() {
            $('.dropdown-info').show();
            descriptionOpen === true;
        });
    };
    else if (descriptionOpen === true) {
        $('.header').click(function() {
            $('.dropdown-info').hide();
            descriptionOpen === false;
        });
    };
});


$(document).ready(function() {

    $('.header').toggle(function() {
        ('.dropdown-info').show();
    }, function() {
        ('.dropdown-info').hide();
    });
});

Answer 1

只需这样做:

$('.header').click(function() {
    $('.dropdown-info').toggle();
});