单击链接时如何关闭菜单？

Question

I have a code, but I need help please, how can I close the menu when clicking on a link item.我有一个代码，但我需要帮助，如何在单击链接项时关闭菜单。 that's what I'm stuck on这就是我坚持的

$('.burger').on('click', function() {
  $(this).toggleClass('active');
  $('.menu__list').slideToggle();
});

let ul = document.querySelector('.menu__list');
let li = document.querySelectorAll('.menu__link');

li.forEach(el => {
  el.addEventListener('click', function() {
    ul.querySelector('.menu__link--active').classList.
    remove('menu__link--active');

    el.classList.add('menu__link--active');
  });
});

Answer 1

我可以想到2个解决方案，首先，制作一个具有屏幕高度和宽度的透明div，并在其上制作一个单击事件侦听器以关闭菜单，另一种选择是使用焦点和模糊事件侦听器

Answer 2

Just add .slideToggle() to the click listener:只需将 .slideToggle() 添加到点击监听器：

$('.burger').on('click', function() {
  $(this).toggleClass('active');
  $('.menu__list').slideToggle();
});

let ul = document.querySelector('.menu__list');
let li = document.querySelectorAll('.menu__link');

li.forEach(el => {
  el.addEventListener('click', function() {
    ul.querySelector('.menu__link--active').classList.
    remove('menu__link--active');

    el.classList.add('menu__link--active');
    $('.menu__list').slideToggle();
  });
});

Answer 3

Believing that you are having a list of items in your example I am providing the below solution.相信您的示例中有一个项目列表，我提供了以下解决方案。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); $(".closemenu").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } .closemenu{ font-weight:bold; list-style:none; } </style> </head> <body> <div id="flip">Click to slide the panel down or up</div> <div id="panel"> <ul> <li class="closemenu">item1</li> <li class="closemenu">item2</li> <li class="closemenu">item3</li> </ul> </div> </body> </html>

单击链接时如何关闭菜单？

问题描述

3 个解决方案

解决方案1
0 2021-07-05 15:53:00

解决方案2
0 已采纳 2021-07-06 08:34:52

解决方案3
0 2021-07-06 10:36:08

单击链接时如何关闭菜单？

问题描述

3 个解决方案

解决方案1 0 2021-07-05 15:53:00

解决方案2 0 已采纳 2021-07-06 08:34:52

解决方案3 0 2021-07-06 10:36:08

解决方案1
0 2021-07-05 15:53:00

解决方案2
0 已采纳 2021-07-06 08:34:52

解决方案3
0 2021-07-06 10:36:08