Мобильное меню

[Igorsrt]

Здравствуйте! Скопировал с другого сайта мобильное меню.

<!-- 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();
            }
            
        });

но как заставить его работать? В какую-то функцию нужно обернуть? Понимаю, что туплю, но что делать... ((

[j0hnik]

мб jquery
или обернуть

$(function(){

});

[Igorsrt]

пытался обернуть

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


});

что-то не работает

[j0hnik]

делайте полный макет.

[Igorsrt]

вот

[Igorsrt]

главное, если меняю

$('.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 не хочет работать, хот ты тресни

[Igorsrt]

я кажется понял причину. сейчас скрипт у меня выглядит

(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 и поэтому классы не добавляются (т.е. добавляются и тут же исчезают)... А как быть?

[j0hnik]

$('.menu-button').click(function(){
   event.stopPropagation();
   $('.menu-button').toggleClass('active');
   $('.mobile-menu').toggleClass('open');
});

[Igorsrt]

супер! Спасибо