-->

让Slicknav菜单关闭时,外面点击IOS设备(Make Slicknav menu close

2019-10-22 16:14发布

我使用的是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:

在我的网站上的右键菜单使用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'); 
    }
});


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点击时的状态。

读到这里 -它应该解决您的问题。



文章来源: Make Slicknav menu close when outside click on IOS devices