在外部单击 IOS 设备时关闭 Slicknav 菜单答案

【问题标题】：Make Slicknav menu close when outside click on IOS devices在外部单击 IOS 设备时关闭 Slicknav 菜单
【发布时间】：2015-04-15 18:57:03
【问题描述】：

我正在使用 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>

【问题讨论】：

所以我假设 closeOnClick 选项没有剪切它，它之后的代码是你的尝试？ $('.slicknav_menu').focusout(function(event){ $('.menu').slicknav('close'); }); }); 另外，这可能是浏览器问题，与 Ipad 或 Android 无关。您在 Ipad 上使用的浏览器是什么？

标签： javascript jquery mobile menu focusout

【解决方案1】：

在我的网站上，右侧菜单使用 slicknav。多亏了这段代码，当我在 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'); 
    }
});

【讨论】：

【解决方案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');
}
});

【讨论】：

【解决方案3】：

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

阅读here - 它应该可以解决您的问题。

【讨论】：