Slicknav：单击外部时如何关闭菜单答案

【问题标题】：Slicknav: how to close menu when clicking outsideSlicknav：单击外部时如何关闭菜单
【发布时间】：2016-02-04 23:52:11
【问题描述】：

我正在使用SlickNav jQuery plugin，但默认情况下似乎没有设置在模糊或失去焦点时自动关闭菜单，也没有设置。

我以为这只是一个简单的调用：

 <script>
  $(document).ready(function() {
    //close menu on lost focus
    $('.js .slicknav_menu').focusout(function(event){
     $(this).slicknav('close');
    });  
  });
 </script>

但这并没有做任何事情。在菜单外点击时如何关闭菜单？

【问题讨论】：

你能分享你的完整代码吗？
我不知道您还需要什么其他代码，但如果您不熟悉该插件，我会提供该插件的链接。
这个解决方案对我有用：stackoverflow.com/questions/29658550/…

标签： jquery mobile slicknav

【解决方案1】：

我提到了您在问题中提到的网站。尝试了网站中给出的第一个示例。（HTML代码如下）

HTML -

<ul id="menu">
    <li><a class="scroll" href="#features">Features</a></li>
    <li><a class="scroll" href="#usage">Usage Instructions</a></li>
    <li><a class="scroll" href="#examples">Examples</a></li>
    <li><a href="http://github.com">View on Github</a></li>
</ul>

我看到菜单在失去焦点事件时默认不会关闭。下面的代码可以达到同样的效果。

$(document).ready(function() {
    //close menu on lost focus
    $('.slicknav_menu').focusout(function(event){
        $('#menu').slicknav('close'); //Here 'menu' is the id of ul.
    });  
  });

【讨论】：

这通常是我以前的情况，但仍然无法正常工作。这就是我现在所拥有的，源文件位置检查正常：codepen.io/anon/pen/wukdv

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

【讨论】：