在外部单击IOS设备时关闭Slicknav菜单 [英] Make Slicknav menu close when outside click on IOS devices

问题描述

我正在使用Slicknav移动菜单脚本: http://slicknav.com/

I'm using the Slicknav mobile menu script: http://slicknav.com/

它运行良好，但是我无法弄清楚在ios设备上的菜单外单击时如何使其关闭.当我在台式机和Android上进行测试时，在外部单击时可以关闭，但在Ipad上无法正常工作.这是当前代码.有见识吗?谢谢！

And it's working great except I can't figure out how to get it to close when one clicks outside of the menu on ios devices. It closes fine when clicking outside when I test it on desktop and Android, but on my Ipad it's not working. Here's the current code. Any insight? Thank you!

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


<nav>
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
</ul>
</nav>

推荐答案

在我的网站上，右侧菜单使用slicknav.由于此代码，当我在iOS上单击外部时，它关闭正常.演示: http://www.crealisationweb.fr

On my site the right menu uses slicknav. It closes fine when i click outside on iOS thanks to this code. Demonstration : http://www.crealisationweb.fr

替换此:

$('.slicknav_menu').focusout(function(event){
    $('.menu').slicknav('close');
});

有了这个:

$("div, html").on("click", function (event) { 
    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'); 
    }
});

这篇关于在外部单击IOS设备时关闭Slicknav菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！