Как закрыть меню гамбургера после нажатия на элемент? - PullRequest
Новая
       31

Как закрыть меню гамбургера после нажатия на элемент?

1 голос
/ 12 апреля 2020

Не удается закрыть меню после нажатия кнопки гамбургера. Каков наилучший способ закрыть весь экран меню после нажатия любого из элементов?

Мой HTML: 

`<body>
  <div class="menu-wrap">
    <input type="checkbox" class="toggler">
    <div class="hamburger">
      <div></div>
    </div>
    <div class="menu">>
      <div>
        <div>
          <ul>
            <li><a href="#Home">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>`

Я пытался использовать jQuery, но не имел успех. Вот код js: 

`$('.toggler').on('click', function () {
    $('.menu').toggleClass('open');
});
$('.menu li').on("click", function () {
    $('.menu-wrap').toggleClass('open');
});`

Или, если есть простой способ, используя CSS, чтобы закрыть меню?

Вот код для запуска: https://jsfiddle.net/7rmcx861/# & Togetherjs = g5zDdkhjc5

Ответы [ 2 ]

1 голос
/ 12 апреля 2020

Если вы хотите сделать это с ванилью js, я бы предложил вам использовать CustomEvents. Могут быть и другие способы сделать это в таких фреймворках, как React.

Для каждого элемента меню я буду генерировать пользовательское событие - 

var menuItems = document.querySelectorAll('.menu li');

for (var i = 0; i < menuItems.length; ++i) {
  menuItems[i].addEventListener('click', function(e) {
    var closeEvent = new CustomEvent('closeMenu', {
      bubbles: true,
    });
    e.currentTarget.dispatchEvent(closeEvent);
  });
}

«Меню» может затем реагировать на это пользовательское событие и закройте себя, если открыто - 

var menu = document.querySelector('.menu')
if (menu) {
  menu.addEventListener('closeMenu', function (e) {
    e.currentTarget.classList.remove('open');
  });
}

У вас может быть обычное меню «переключатель» для открытия и закрытия меню при нажатии.

Обновление:

Я полагал, что вещи не очень ясны. Итак, я добавляю пример кода. Примечание: я добавил переключатель и впоследствии немного изменил меню eventHandler. 

var menuItems = document.querySelectorAll('.menu li');

for (var i = 0; i < menuItems.length; ++i) {
  menuItems[i].addEventListener('click', function(e) {
    var closeEvent = new CustomEvent('closeMenu', {
      bubbles: true,
    });
    e.currentTarget.dispatchEvent(closeEvent);
  });
}

var menu = document.querySelector('.menu')
var toggler = document.querySelector('.toggler')
if (menu && toggler) {
  menu.addEventListener('closeMenu', function(e) {
    menu.classList.remove('open');
    toggler.checked = false;
  });
  toggler.addEventListener('click', function(e) {
    menu.classList.toggle('open');
  });
}
.menu {
  background-color: white;
  display: inline-block;
  padding-right: 1rem;
}

.menu.open {
  visibility: visible;
}

.menu {
  visibility: hidden;
}
<div class="menu-wrap">
  <input type="checkbox" class="toggler" checked>
  <div class="hamburger">
    <div></div>
  </div>
  <div class="menu open">
    <div>
      <div>
        <ul>
          <li><a href="#Home">Home</a></li>
          <li><a href="#About">About</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
1 голос
/ 12 апреля 2020

https://jsfiddle.net/h7et0qnv/

этот стиль меню работает в случае ввода чечбокса. Если флажок установлен, меню гамбургера становится видимым, иначе скрывается. так что просто нужно изменить его ситуацию

написал одну функцию в вашем скрипте. 

function toggle(){
    $(".toggler").prop("checked", false);
}

затем поместите эту функцию в событие onclick списка меню 

<li><a onclick="toggle()" href="#Home">Home</a></li>
 <li><a onclick="toggle()" href="#About">About</a></li>
 <li><a onclick="toggle()" href="#">Menu</a></li>
 <li><a onclick="toggle()" href="#">Contact</a></li>
...