用jQuery打开和关闭div很麻烦

Question

＆＃13;

＆＃13;

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

.dropdown-info {
  display: none;
}

＆＃13;

<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>
  

＆＃13;

＆＃13;

＆＃13;

我试图打开并关闭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();
});