0

我正在使用 Slicknav：http ://slicknav.com/

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

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

1 回答 1

1

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

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

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

于 2015-04-26T02:28:31.827 回答