Блог

Главная - Вопросы по программированию - как закрыть меню при нажатии на ссылку?

как закрыть меню при нажатии на ссылку?

#javascript

Вопрос:

У меня есть код, но мне нужна помощь, пожалуйста, как я могу закрыть меню при нажатии на пункт ссылки. вот на чем я застрял

 $('.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');
  });
});

Ответ №1:

Просто добавьте .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();
  });
});

Комментарии:

1. Спасибо, это работает, только я добавил чек для активного класса кнопки бургер

Ответ №2:

Я могу придумать 2 решения, во-первых, сделать прозрачный div с высотой и шириной экрана и создать на нем прослушиватель событий щелчка, чтобы закрыть меню, другой вариант-использовать прослушиватель событий фокусировки и размытия

Ответ №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>
Метки: