Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.08.2018, 08:15
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 198

Мобильное меню
Здравствуйте! Скопировал с другого сайта мобильное меню.
<!-- 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();
            }
            
        });

но как заставить его работать? В какую-то функцию нужно обернуть? Понимаю, что туплю, но что делать... ((
Ответить с цитированием
  #2 (permalink)  
Старый 13.08.2018, 08:40
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,287

мб jquery
или обернуть
$(function(){

});
Ответить с цитированием
  #3 (permalink)  
Старый 13.08.2018, 08:49
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 198

пытался обернуть
$(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();
            }
            
        });


});
что-то не работает
Ответить с цитированием
  #4 (permalink)  
Старый 13.08.2018, 08:50
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,287

делайте полный макет.
Ответить с цитированием
  #5 (permalink)  
Старый 13.08.2018, 09:29
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 198

вот
Вложения:
Тип файла: zip new 1.zip (2.2 Кб, 0 просмотров)
Ответить с цитированием
  #6 (permalink)  
Старый 13.08.2018, 09:48
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 198

главное, если меняю
$('.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 не хочет работать, хот ты тресни
Ответить с цитированием
  #7 (permalink)  
Старый 13.08.2018, 11:04
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 198

я кажется понял причину. сейчас скрипт у меня выглядит
(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 и поэтому классы не добавляются (т.е. добавляются и тут же исчезают)... А как быть?
Ответить с цитированием
  #8 (permalink)  
Старый 13.08.2018, 11:17
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,287

$('.menu-button').click(function(){
   event.stopPropagation();
   $('.menu-button').toggleClass('active');
   $('.mobile-menu').toggleClass('open');
});
Ответить с цитированием
  #9 (permalink)  
Старый 13.08.2018, 11:24
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 198

супер! Спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Мобильное меню, window.resize moslem jQuery 2 24.05.2016 18:49
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 14:30
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36