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

Question

我基本上想在我第一次按下按钮时添加 display: none; 到一个元素，当我再次按下它时，它会再次出现该元素（因此添加 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

使用切换或滑动切换（带动画）

 $('#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>

Answer 2

您可以在某些外部样式表中提供修饰符类来隐藏文本并通过toggleClass切换它。

忠告：最好不要使用诸如切换之类的东西，因为它会将内联 css 注入您的元素，从长远来看，很难覆盖如此简单的东西。

 const $headerText = $('.header-text'); $('#menuBtn').click(function() { $headerText.toggleClass('header-text--hidden'); });

 .header-text--hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="menuBtn" type="button">Toggle</button> <header> <p class="header-text">Text 1</p> <p class="header-text">Text 2</p> <p class="header-text">Text 3</p> <p class="header-text">Text 4</p> </header>

Answer 3

您实际上不需要为此使用 jQuery。

您可以添加 CSS 规则以将.hidden设置为display: none然后在单击按钮时切换该类。

要捕获按钮上的单击事件，您需要一个单击事件侦听器

 const header = document.querySelector('.header'); const toggle = document.querySelector('.menu-toggle'); toggle.addEventListener('click', () => { header.classList.toggle('hidden') });

 .header { background: red; height: 3em; } .hidden { display: none; }

 <header class="header"></header> <button class="menu-toggle">Click me!</button>

Answer 4

.hidden{display:none !important;}

$('#menuBtn').click(function() {
    $('.header-text').toggleClass("hidden");        
});