05.09.2017, 11:39
|
|
Аспирант
|
|
Регистрация: 17.04.2017
Сообщений: 72
|
|
Вот так заработало
$(document).ready(function(){
$('.menu__list').on('mouseenter', function (e) {
if( e.relatedTarget === null && e.type !== 'click' ) return;
$('.middleMenu__drop').slideDown(100).addClass('open');
});
$('.menu__list').on('mouseleave', function (e) {
$('.middleMenu__drop').slideUp(100).removeClass('open');
});
$('.menu__list').on('click', function (e) {
if($('.middleMenu__drop').hasClass('open')){
$('.middleMenu__drop').slideUp(100).removeClass('open');
}else{
$('.middleMenu__drop').slideDown(100).addClass('open');
}
})
});
|
|
05.09.2017, 11:47
|
|
Аспирант
|
|
Регистрация: 17.04.2017
Сообщений: 72
|
|
|
Новая проблема, к сожалению не хватает знаний, что бы разобраться. Теперь меню работает нормально вроде как, но таких меню на сайте несколько, я написал этот код, со своими классами для каждого меню. И теперь наблюдается такая ситуация, при нажатии ан тачскрине меню раскрывается и скрывается нормально, но если после этого я пытаюсь раскрыть другое меню, то оно так же открывается и тут же скрывается. Подскажите что нудно поправить?
|
|
09.09.2017, 10:14
|
|
Аспирант
|
|
Регистрация: 17.04.2017
Сообщений: 72
|
|
|
Так и не удалось решить задачу=( Возможно все же, кто-нибудь все же укажет куда копать
|
|
09.09.2017, 10:32
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,794
|
|
Tipylja,
$(document).ready(function(){
$('.menu__list').on('mouseenter',function(e){
if(!e.relatedTarget)
return;
$(this).find('.middleMenu__drop').slideDown(100).addClass('open');
});
$('.menu__list').on('mouseleave',function(e){
$(this).find('.middleMenu__drop').slideUp(100).removeClass('open');
});
$('.menu__list').on('click',function(e){
$(this).find('.middleMenu__drop').slideToggle(100).toggleClass('open');
});
});
|
|
09.09.2017, 11:05
|
|
Аспирант
|
|
Регистрация: 17.04.2017
Сообщений: 72
|
|
Сообщение от Nexus
|
Tipylja,
$(document).ready(function(){
$('.menu__list').on('mouseenter',function(e){
if(!e.relatedTarget)
return;
$(this).find('.middleMenu__drop').slideDown(100).addClass('open');
});
$('.menu__list').on('mouseleave',function(e){
$(this).find('.middleMenu__drop').slideUp(100).removeClass('open');
});
$('.menu__list').on('click',function(e){
$(this).find('.middleMenu__drop').slideToggle(100).toggleClass('open');
});
});
|
Спасибо, работает адекватно, до того момента пока кликать "menu__list", если же раскрыть меню, кликнуть куда-нибудь вне него, меню закроется, а если вновь кликнуть после этого на "menu__list" меню откроется и тут же скроется, как и ранее - на мобильных экранах, на десктопе все работает отлично.
UPD. Более простая ситуация - открываем страницу на таскрине, тапаем куда угодно в пустое место вне меню, после чего тапаем на меню и получаем - меню раскрывается и тут же скрывается
Последний раз редактировалось Tipylja, 09.09.2017 в 11:12.
|
|
10.09.2017, 09:09
|
|
Аспирант
|
|
Регистрация: 17.04.2017
Сообщений: 72
|
|
|
Извиняюсь, возможно кто-то что-нибудь еще подскажет?
|
|
10.09.2017, 11:23
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Сообщение от Tipylja
|
|
Извиняюсь, возможно кто-то что-нибудь еще подскажет?
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul class="wrap middleMenu">
<li class="menu__list first"><a>Каталог</a>
<ul class="middleMenu__drop" style="display: none;">
<li><a href="#">Туфли</a></li>
<li><a href="#">Босоножки</a></li>
<li><a href="#">Кеды</a></li>
<li><a href="#">Кросcовки</a></li>
<li><a href="#">Ботинки демисезон</a></li>
<li><a href="#">Сапоги демисезон</a></li>
</ul>
</li>
<li><a href="#">ОПЛАТА / ДОСТАВКА</a></li>
<li><a href="#">ОТЗЫВЫ О МАГАЗИНЕ</a></li>
<li class="last"><a href="#">НОВИНКИ</a></li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function is_touch_device() {
return (('ontouchstart' in window)
|| (navigator.MaxTouchPoints > 0)
|| (navigator.msMaxTouchPoints > 0));
}
if (!is_touch_device()) {
$('.menu__list').on('mouseenter', function (e) {
$('.middleMenu__drop').slideDown(100);
});
$('.menu__list').on('mouseleave', function (e) {
$('.middleMenu__drop').slideUp(100);
});
}
else {
$('.menu__list').on('touchstart', function (e) {
$('.middleMenu__drop').slideToggle(100);
});
}
</script>
</body>
</html>
|
|
10.09.2017, 11:36
|
 |
Профессор
|
|
Регистрация: 19.01.2012
Сообщений: 505
|
|
А если так?
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<ul class="wrap middleMenu">
<li class="menu__list first"><a>Каталог</a>
<ul class="middleMenu__drop" style="display: none;">
<li><a href="#">Туфли</a></li>
<li><a href="#">Босоножки</a></li>
<li><a href="#">Кеды</a></li>
<li><a href="#">Кросcовки</a></li>
<li><a href="#">Ботинки демисезон</a></li>
<li><a href="#">Сапоги демисезон</a></li>
</ul>
</li>
<li><a href="#">ОПЛАТА / ДОСТАВКА</a></li>
<li><a href="#">ОТЗЫВЫ О МАГАЗИНЕ</a></li>
<li class="last"><a href="#">НОВИНКИ</a></li>
</ul>
<script>
$('.menu__list').on('mouseleave mouseenter click', function (e) {
console.log(e);
if( e.relatedTarget === null && e.type !== 'click' ) return;
switch( e.handleObj.origType ) {
case 'mouseleave': $(this).find('.middleMenu__drop').slideUp(100); break;
case 'mouseenter': $(this).find('.middleMenu__drop').slideDown(100); break;
case 'click': $('.middleMenu__drop').slideToggle(100); break;
}
});
</script>
P.S. вариант j0hnik работает лучше.
Последний раз редактировалось Белый шум, 10.09.2017 в 11:45.
|
|
11.09.2017, 10:36
|
|
Аспирант
|
|
Регистрация: 17.04.2017
Сообщений: 72
|
|
|
Спасибо всем за помощь, вариант от j0hnik вроде бы работает хорошо!
|
|
11.09.2017, 10:55
|
|
Аспирант
|
|
Регистрация: 17.04.2017
Сообщений: 72
|
|
UPD. На тачскринах, при тапе меню разворачивается, но при тапе по пункту меню я попадаю сквозь него, и нажимаются ссылки которые остались под раскрытым меню:
<li><a href="#">ОПЛАТА / ДОСТАВКА</a></li>
<li><a href="#">ОТЗЫВЫ О МАГАЗИНЕ</a></li>
<li class="last"><a href="#">НОВИНКИ</a></li>
То есть опять меню прозрачно, как я описывал в самом начале этой темы, при тапе по нему, я попадаю тапом под выпадающее меню |
|
|
|
