Question

我有一个代码，但我需要帮助，如何在单击链接项时关闭菜单。这就是我坚持的

$('.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并在上面制作一个点击事件监听器来关闭菜单，另一个选择是使用focus和blur事件监听器< /p>

Answer 2

只需将 .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

相信您的示例中有项目列表，我提供以下解决方案。

<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 个答案: