当外部单击IOS设备时，使Slicknav菜单关闭

Question

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

它工作得很好，只是我不知道当你在ios设备上点击菜单外的时候，如何关闭它。当我在桌面和Android上测试它时，它会很好地关闭，但在我的Ipad上，它不起作用。这是当前的代码。有洞察力吗？谢谢!

<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>

Answer 1

在我的网站上，正确的菜单使用光滑的导航。由于这段代码，当我在iOS上单击“外部”时，它会很好地关闭。演示：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'); 
    }
});

Answer 2

我用过这样的方法

$(window).on("touchstart", function(e) {
    var container = $("#menu");
if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
{
    $('#menu').slicknav('close');
}
});

Answer 3

我记得我创建了我的第一个移动网站，这个问题耗费了很多时间。iOS在单击:hover状态时有一个已知的问题。

读一读这里 -它应该能解决你的问题。