2015-04-25 2 views
0

Я использую Slicknav: http://slicknav.com/Получение мобильного меню оставаться открытым при нажатии подменю - Slicknav

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

<ul id="menu"> 

<li><a href="">link</a></li> 
<li><a href="">link</a></li> 

<li> 
<a href="">Submenu</a> 

<ul> 
<li><a href="">Submenu link</a></li> 
<li><a href="">Submenu link</a></li> 
<li><a href="">Submenu link</a></li> 
</ul> 

</li> 

<li><a href="">link</a></li> 
<li><a href="">link</a></li> 

</ul> 


<script src="slicknav.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('#menu').slicknav({ 
label:'', 
closeOnClick:true 
}); 
}); 

/* close menu on outside click*/ 
$("div, html").on("click", function (event) { 
event.stopPropagation(); 
if(!$(event.target).hasClass("#menu a") && 
!$(event.target).hasClass("ul.slicknav_nav li a") && 
!$(event.target).hasClass("slicknav_menutxt") && 
!$(event.target).hasClass("slicknav_icon") && 
!$(event.target).hasClass("slicknav_icon-bar") && 
!$(event.target).hasClass("slicknav_btn")) { 
$("#menu").slicknav('close'); 
} 
}); 
</script> 

Это зафиксировал его:

document.addEventListener('touchstart', onDocumentTouchStart, false); 
function onDocumentTouchStart(event) { 
    if (event.touches[0] && event.touches[0].target.tagName.toLowerCase() == "div") { 
     $("#menu").slicknav('close'); 
    } 
} 

ответ

1

Измените обработчик щелчка на

/* close menu on outside click*/ 
$("html").on("click", function (event) { 
    if ($(".slicknav_menu").has(event.target).length === 0) 
     $("#menu").slicknav('close'); 
}); 

В принципе проверить, если цель находится в пределах меню, и не закрывать его, если он есть. Если на странице есть несколько экземпляров меню, вам необходимо соответствующим образом изменить свой селектор.

+0

Спасибо за тонну. Он отлично работает на моем Android, но, к сожалению, не на моем Ipad. Не уверен, что делать с устройствами ios. – user1610904

+0

Попробуйте это http://stackoverflow.com/questions/9580267/mobile-safari-event-target-in-touch-event – potatopeelings