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

Question

I am using the SlickNav jQuery plugin , but it seems that auto-closing the menu on blur or lost focus is not set by default and there is no setting for it.

I thought it was just a simple call like this:

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

But this doesn't do anything. How do I close the menu when clicking outside of the menu?

Answer 1

I referred the site that you mentioned in your question. Tried the first example given in the site. (HTML code of which is given below)

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>

I saw menu was not closing by default on lost focus event. Below code worked to achieve the same.

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

Answer 2

I used something like this.
This works also on mobiles.

$(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');
}
});