单击子菜单时让移动菜单保持打开状态 - Slicknav

Question

我几乎所有的行为都正确，但不完全正确。我希望菜单在有人点击它之外时关闭，我得到了，除了现在我强制执行，当我尝试打开子菜单时菜单关闭。我需要让它在单击子菜单时整个菜单保持打开状态，并且在有人单击菜单外部（页面上的其他任何地方）时关闭它。有什么想法吗？

<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');
    }
}

Answer 1

将您的点击处理程序更改为

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

基本上检查目标是否在菜单内，如果是则不要关闭。如果页面上有多个菜单实例，则必须适当更改选择器。

单击子菜单时让移动菜单保持打开状态 - Slicknav

Getting Mobile Menu to stay open when clicking submenu - Slicknav

jquery

mobile

menu

onclick

slicknav