Javascript.RU

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

Кнопка гамбургер разворачивается и сворачивается по клику в любом месте
Я привязала кнопку гамбургер к меню. Сейчас меню открывается после клика по кнопке и закрывается также и закрывается после клика по экрану сворачиваясь обратно в полоски (гамбургер) что я и хотела, остался последний штрих - отключить кнопку от взаимодействия с экраном когда меню закрыто. Кнопка разворачивается и сворачивается по клику в любом месте, что можно добавить в код ниже, чтобы этого не происходило?

$(document).ready(function () {
$(".hs-menubar").hsMenu(); 
$(".hamburger").click(function(){
$(this).toggleClass("is-active");
});
}); 

$(document).click(function(event) { 
$target = $(event.target);
if(!$target.closest('.hamburger').length && 
$('.hamburger').toggleClass("is-active"));
});

Последний раз редактировалось Elenajs, 03.04.2019 в 11:18.
Ответить с цитированием
  #2 (permalink)  
Старый 03.04.2019, 10:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Elenajs,
$(document).click(function(event) {
 $target = $(event.target);
 if(!$target.closest('.hamburger').length &&
 $('.hamburger').is(".is-active")) $('.hamburger').removeClass("is-active");
 })


Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Последний раз редактировалось рони, 03.04.2019 в 13:29.
Ответить с цитированием
  #3 (permalink)  
Старый 03.04.2019, 11:34
Новичок на форуме
Отправить личное сообщение для Elenajs Посмотреть профиль Найти все сообщения от Elenajs
 
Регистрация: 03.04.2019
Сообщений: 6

Теперь меню закрывается после клика по экрану а кнопка не сворачивается обратно в полоски, а нужно чтобы свернулась закрыв меню, а после закрытия меню не анимировала когда кликаешь по экрану, когда меню закрыто.
Ответить с цитированием
  #4 (permalink)  
Старый 03.04.2019, 12:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Elenajs,
$(document).click(function(event) {
 $target = $(event.target);
 if(!$target.closest('.hamburger').length &&
 $('.hamburger').is(".is-active")) $('.hamburger').trigger("click");
 })

Последний раз редактировалось рони, 03.04.2019 в 13:29.
Ответить с цитированием
  #5 (permalink)  
Старый 03.04.2019, 13:08
Новичок на форуме
Отправить личное сообщение для Elenajs Посмотреть профиль Найти все сообщения от Elenajs
 
Регистрация: 03.04.2019
Сообщений: 6

Тоже самое что и с первым вариантом, кнопка не сворачивается обратно в полоски. Может нужно добавить условие на проверку закрытости меню при клике в этот код ? Только я не знаю какой
$(document).click(function(event) { 
$target = $(event.target);
if(!$target.closest('.hamburger').length && 
$('.hamburger').toggleClass("is-active"));
});
Ответить с цитированием
  #6 (permalink)  
Старый 03.04.2019, 13:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Elenajs,
без макета можно только гадать
Ответить с цитированием
  #7 (permalink)  
Старый 03.04.2019, 13:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Elenajs,
$('.hamburger').is(".точку пропустил is-active"))
Ответить с цитированием
  #8 (permalink)  
Старый 03.04.2019, 21:13
Новичок на форуме
Отправить личное сообщение для Elenajs Посмотреть профиль Найти все сообщения от Elenajs
 
Регистрация: 03.04.2019
Сообщений: 6

Вот тут наглядный пример (макет) https://jsfiddle.net/mqtbLxsz/
как видите кнопка анимирует если кликать по экрану.
Ответить с цитированием
  #9 (permalink)  
Старый 03.04.2019, 21:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Elenajs,
код проверяли из поста #4 ?
https://jsfiddle.net/ty7pdfr6/
Ответить с цитированием
  #10 (permalink)  
Старый 03.04.2019, 22:13
Новичок на форуме
Отправить личное сообщение для Elenajs Посмотреть профиль Найти все сообщения от Elenajs
 
Регистрация: 03.04.2019
Сообщений: 6

Все работает как надо, спасибо большое!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вставлять переменную в span Hovik Общие вопросы Javascript 17 20.12.2018 08:30
узнать индекс кнопки из массива Hovik Общие вопросы Javascript 0 16.12.2018 02:20
Сворачивание меню при клике в любом месте страницы DmitriyLan Элементы интерфейса 4 30.05.2017 16:18
Canvas текст в любом месте. levshkatov Общие вопросы Javascript 10 03.09.2014 21:15
Блок, сворачивается, кнопка не меняется Gniloy Элементы интерфейса 1 06.01.2014 16:18