javascript - 使菜单打开时标题内容消失

Question

我基本上想在我第一次按下按钮时添加显示:无；到一个元素，当我再次按下它时，它会使该元素再次出现(因此添加 display: none;)。我该如何使用 jQuery 做到这一点？

这是我尝试实现的 jQuery，但由于我是 Javascript 新手，我不知道为什么它不起作用。

$('#menuBtn').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
    $('.header-text').css({
      'display': 'none'
    });
  } else {
    $('.header-text').css({
      'display': 'block'
    });
  }
  $(this).data("clicks", !clicks);
});

Answer 1

使用toggle或slideToggle (With animation)

$('#menuBtn').on('click', function() {
    $('.header-text').toggle();
});
$('#menuBtnSlide').on('click', function() {
    $('.header-text').slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn">Toggle</button>
<button id="menuBtnSlide">SlideToggle</button>

<div class="header-text">
This content must me show and hide
</div>