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

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

并且它工作得很好，除非我在ios设备上单击菜单外部时无法弄清楚如何关闭它。 当我在台式机和Android上测试它时，它在外面点击时会很好，但是在我的Ipad上它没有用。 这是当前的代码。 任何见解？ 谢谢！

  $(document).ready(function(){ $('.menu').slicknav({ label:'', closeOnClick:true }); $('.slicknav_menu').focusout(function(event){ $('.menu').slicknav('close'); }); });  
 
 
Home
 
Link1
 
Link2
 
  

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单击时:hover状态。

在这里阅读 – 它应该解决你的问题。