Сделать содержимое заголовка исчезнет, ​​когда откроется меню

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

Используйте переключатель или slideToggle (с анимацией)

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

Совет: Лучше не использовать что-то вроде toggle , потому что он вставит встроенный css в ваши элементы, что затруднит переопределение в долгосрочной перспективе для чего-то более простого c.

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");        
});