Мобильное меню
Здравствуйте! Скопировал с другого сайта мобильное меню.
<!-- Mobile menu -->
<div class="menu-button hidden-lg">
<span class="icon-menu-burger">
<span class="icon-menu-burger__line"></span>
</span>
</div>
<div class="mobile-menu" id="mobmenu">
<div class="push55"></div>
<div class="mobile-menu-inner">
<ul class=""><li class="first active"><a href="/">Главная</a></li><li><a href="arenda-texniki/">Аренда техники</a></li><li><a href="podryadnyie-rabotyi.html">Подрядные работы</a></li><li><a href="oformlenie-zakaza.html">Стоимость</a></li><li class="last"><a href="kontaktyi/">Контакты</a></li></ul>
</div>
<div class="push30"></div>
</div>
<div class="overlay"></div>
<!-- /. Mobile menu -->
Но никак не получается заставить его работать, т.е. нужно что бы при нажатии на кнопку добавлялись классы. В оригинальном сайте вижу такой код в js
$('.menu-button').click(function(){
$('.menu-button').toggleClass('active');
$('.mobile-menu').toggleClass('open');
});
$('body').click(function(){
$('.mobile-menu').removeClass('open');
$('.menu-button').removeClass('active');
});
$('.mobile-menu ul > li').has('ul').addClass('down');
$('.mobile-menu .down > ul').before('<span class="dropdown-button"></span>');
$('.mobile-menu .dropdown-button').click(function(){
$(this).toggleClass('active');
if($(this).siblings('ul').is(':visible')){
$(this).siblings('ul').slideUp();
}else{
$(this).siblings('ul').slideDown();
}
});
но как заставить его работать? В какую-то функцию нужно обернуть? Понимаю, что туплю, но что делать... (( |
мб jquery
или обернуть
$(function(){
});
|
пытался обернуть
$(function(){
$('.menu-button').click(function(){
$('.menu-button').toggleClass('active');
$('.mobile-menu').toggleClass('open');
});
$('body').click(function(){
$('.mobile-menu').removeClass('open');
$('.menu-button').removeClass('active');
});
$('.mobile-menu ul > li').has('ul').addClass('down');
$('.mobile-menu .down > ul').before('<span class="dropdown-button"></span>');
$('.mobile-menu .dropdown-button').click(function(){
$(this).toggleClass('active');
if($(this).siblings('ul').is(':visible')){
$(this).siblings('ul').slideUp();
}else{
$(this).siblings('ul').slideDown();
}
});
});
что-то не работает |
делайте полный макет.
|
Вложений: 1
вот
|
главное, если меняю
$('.menu-button').click(function(){
$('.menu-button').toggleClass('active');
$('.mobile-menu').toggleClass('open');
});
на
$('body').click(function(){
$('.menu-button').toggleClass('active');
$('.mobile-menu').toggleClass('open');
});
то начинает работать при клике по экрану... но мне то нужно при клике на кнопку - а с .menu-button не хочет работать, хот ты тресни |
я кажется понял причину. сейчас скрипт у меня выглядит
(function ($) {
$(document).ready(function() {
$('.menu-button').click(function(){
$('.menu-button').toggleClass('active');
$('.mobile-menu').toggleClass('open');
});
$('body').click(function(){
$('.mobile-menu').removeClass('open');
$('.menu-button').removeClass('active');
});
});
})(jQuery);
т.е. плучается вторая часть (которая $('body').click(function() ) выполняется и тогда, когда я нажимаю на .mobile-menu и поэтому классы не добавляются (т.е. добавляются и тут же исчезают)... А как быть? |
$('.menu-button').click(function(){
event.stopPropagation();
$('.menu-button').toggleClass('active');
$('.mobile-menu').toggleClass('open');
});
|
супер! Спасибо
|
| Часовой пояс GMT +3, время: 22:18. |