X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Проблема с закрытием вертикального меню
WebJunior_mw
WebJunior_mw
Topic Starter сообщение 24.12.2017, 22:17; Ответить: WebJunior_mw
Сообщение #1


Доброго времени суток! Разрабатываю свой форумный движок. Сделал вертикальное пользовательское меню наподобие как в вк. Всё хорошо при первом клике меню появляется при повторном исчезает. Но закрыть меню можно только если кликнуть по аватару, но хотелось бы, что бы меню можно было закрыть кликнув в любую точку экрана.


Сейчас попытаюсь объяснить более подробно. 

WXmsBvrqQTukrxERQrvF8A.png


Ничего не обычного нет повесил событие на див в котором находится ник и аватарка. Второе событие повесил на document, что бы при клике по произвольной точке меню закрывалось. Но если курсор попадает на стрелку которая находится с права от аватара то ничего не выходит возникает конфликт событий. Когда вешаю второе событие клик начинает обрабатываться на стрелки хотя этого быть не должно это всё портит.
 

function visibleTopMenu(isVisible){

if(isVisible == 1){
$('.top-profile-control').css('background', 'rgba(67, 67, 67, 0.9)');
$('.top-profile-arrow').css('opacity', '1');
$('.top-profile-menu').addClass('is-visible');
$('.top-profile-menu').show();
} else {
$('.top-profile-control').css('background', '');
$('.top-profile-arrow').css('opacity', '0.7');
$('.top-profile-menu').removeClass('is-visible');
$('.top-profile-menu').hide();
}
}

$(document).on("click", ".top-profile-control", (e) => {

if(!$('.top-profile-menu').hasClass('is-visible')){
visibleTopMenu(1);
} else {
visibleTopMenu(0);
}
});

$(document).on("click", (e) => {
if($('.top-profile-menu').hasClass('is-visible')){
visibleTopMenu(0);
}
}); 

Дополнительные проверки во втором обработчике события приводят к тому, что когда курсор попадает на стрелку то меню либо не открывается либо наоборот не закрывается(завит от условия). Несколько часов втыкаю в экран уже все пиксели глазами протёр)) Но так и не понял как сделать так, что бы меню закрывалось не только при клике по пользовательскому диву.

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


P.S Опыт у меня не большой знаю всего по чучуть прошу сильно не ругать.


Сообщение отредактировал Разгильдяев - 24.12.2017, 22:51
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WebJunior_mw
WebJunior_mw
Topic Starter сообщение 25.12.2017, 12:46; Ответить: WebJunior_mw
Сообщение #2


Спасибо. Разберусь как нибудь сам. Прошу тему удалить.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ixman
ixman
сообщение 25.12.2017, 13:18; Ответить: ixman
Сообщение #3


[mention]Разгильдяев, а что сразу истерика началась? Никто не помог, либо времени нет, либо тот кто может, ещё не видел тему.

Во-первых ваш код можно сократить, если не ошибаюсь

function visibleTopMenu(isVisible){

if(isVisible == 1){
$('.top-profile-control').css('background', 'rgba(67, 67, 67, 0.9)');
$('.top-profile-arrow').css('opacity', '1');
$('.top-profile-menu').addClass('is-visible').show();
} else {
$('.top-profile-control').css('background', '');
$('.top-profile-arrow').css('opacity', '0.7');
$('.top-profile-menu').removeClass('is-visible').hide();
}
}

Так попробуйте в качестве селектора указать body для закрытия на любую точку. И слишком сложно реализовано у вас. Можно в разы короче и вообще чисто на css.


Сообщение отредактировал Ixman - 25.12.2017, 13:15
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WebJunior_mw
WebJunior_mw
Topic Starter сообщение 25.12.2017, 13:51; Ответить: WebJunior_mw
Сообщение #4


Ixman, Это не истерика. Просто не приятно. Мою тему с таким успехом могли увидеть через год) Только какой потом смысл в этих ответах?  Я конечно понимаю, что никто не обязан отвечать, но когда создаёшь тему рассчитываешь на помощь. Ну по крайней мере теперь буду знать, что на быстрые ответы рассчитывать не стоит. И создавать тему только если в других источниках не нашлось нужной мне информации.




(Ixman @ 25.12.2017, 16:18) *
И слишком сложно реализовано у вас


То, что слишком сложно реализовано это я уже понял. Телодвижений много. И событие нужно вешать только на документ и потом отслеживать по каким элементам был клик. Два события будут конфликтовать между собой.


В любом случаи спасибо, что отписались.


Сообщение отредактировал Разгильдяев - 25.12.2017, 13:52
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ixman
ixman
сообщение 25.12.2017, 15:22; Ответить: ixman
Сообщение #5


[mention]Разгильдяев, все рассчитывают на быстрый ответ. Тут как повезёт.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
fedornabilkin
fedornabilkin
сообщение 25.12.2017, 15:59; Ответить: fedornabilkin
Сообщение #6


Есть такое понятие, как bubbling (всплытие). Это значит, что событие всплывает от целевого элемента вплоть до document.
Поэтому обработчик, который установлен на document, всегда скрывает меню, а чтобы не было конфликтов, необходимо остановить всплытие в обработчике .top-profile-control
Сделать это можно, добавив после всего:

e.stopPropagation();

Применять event.stopPropagation() необходимо очень аккуратно, потому что невозможно будет отследить клики (в данном случае) по меню из обработчика, который установлен выше.
Почему бы не добавить правила стилей в is-visible и добавлять/убирать только этот класс?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WebJunior_mw
WebJunior_mw
Topic Starter сообщение 25.12.2017, 22:35; Ответить: WebJunior_mw
Сообщение #7


fedornabilkin, Всплытие тут не причём.  Всё на много проще. Событие было повешено на top-profile-control и на document. Но ведь данный див является частью document'a. При клике срабатывают два события одно перебивает другое. Поэтому событие нужно вешать только на document. При клике отслеживается элемент по которому был клик. Если это top-profile-control(в моём случаи) то тогда делаем видимым top-profile-menu при повторном клике по top-profile-control меню скрывается. Клик по самой менюшке не учитывается при клике по произвольной части страницы меню только скрывается.

Я с самого начала протупил. Идея вешать два события изначально была плохой.


Сообщение отредактировал Разгильдяев - 25.12.2017, 22:43
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
fedornabilkin
fedornabilkin
сообщение 26.12.2017, 10:24; Ответить: fedornabilkin
Сообщение #8


Если всплытие не причем, тогда следует ознакомиться со всплытием https://learn.javascript.ru/event-bubbling


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Проблема с админкой
5 Prok 2315 29.7.2019, 20:04
автор: dvakarandasha
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПроблема с таблицей, которая выводится через скрипт
7 vanchester 1335 15.2.2019, 19:06
автор: Artos_mw
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
1 Викторио_mw 1452 28.8.2018, 0:10
автор: TimurR
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПроблема в тегах при сохранении контента
1 Kord18 1403 13.3.2018, 18:19
автор: Evgeniy3200
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПроблема вёрстки адаптивной страницы на divах
28 master-vek 4712 8.2.2018, 19:29
автор: master-vek


 



RSS Текстовая версия Сейчас: 28.3.2024, 20:48
Дизайн