如何关闭响应式菜单，单击导航外部

Question

您好，我的问题是我有一个菜单，一个带有引导程序的响应式菜单我想在桌面上的响应式视图上关闭菜单它很好但是在响应式视图上我希望当我在任何区域的导航菜单之外单击它应该关闭，我的导航代码如下

<!-- Navigation -->

<nav id="navigation-sticky" class="white-nav b-shadow">

    <!-- Navigation Inner -->

    <div class="nav-inner">

        <div class="logo">

            <!-- Navigation Logo Link -->

            <a href="#home" class="scroll">

                <!-- Your Logo -->

                <img src="" class="site_logo" alt=""/><br>

               </a>

        </div>

        <!-- Mobile Menu Button -->

        <a  class="mobile-nav-button colored"><i class="fa fa-bars"></i></a>

        <!-- Navigation Menu -->

        <div class="nav-menu clearfix ">

            <ul class="nav uppercase oswald">

                <li><a href="#home" class="scroll">home</a></li>

                <li class="dropdown-toggle nav-toggle" ><span href="#about" class="scroll">About App<b data-toggle="dropdown"></b></span>

                    <!-- DropDown Menu -->

                    <ul class="dropdown-menu uppercase gray-border clearfix">                       

                        <li><a href="#works" class="scroll">HOW DOES IT WORK?</a></li>
                        <li><a href="#features" class="scroll">Features</a></li>                        
                        <li><a href="#what-we-do" class="scroll">APP FLOW</a></li>
                        <li><a href="#faq" class="scroll">F.A.Q</a></li>

                    </ul>

                    <!-- End DropDown Menu -->

                </li>



                <li><a href="#portfolio" class="scroll">Service Types</a></li>

                <li><a href="#skills" class="scroll">Cities</a></li>

                <li><a href="#prices" class="scroll">Rates</a>

                </li>

                <li><a href="#download" class="scroll">Download</a></li>



                <li class="dropdown-toggle nav-toggle" ><span aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle scroll">Become a Driver</span>

                    <!-- DropDown Menu -->

                    <ul class="dropdown-menu uppercase gray-border clearfix">                       

                        <li><a href="#" class="scroll">Signup</a></li>
                        <li><a href="#" class="scroll">Flyer</a></li>                       


                    </ul>

                    <!-- End DropDown Menu -->

                </li>

                                    <li><a href="#" class="scroll">login</a></li>

                <li><a href="#contact" class="scroll">contact</a></li>

            </ul>

        </div><!-- End Navigation Menu -->

    </div><!-- End Navigation Inner -->

</nav><!-- End Navigation -->

我使用此脚本关闭菜单它关闭菜单但菜单通过双击而不是单击打开

$('html').click(function() {
 $('#menu').hide(); 
});

Answer 1

我认为这可能对你有用：

$(document).mouseup(function (e)
{
    var container = $(".nav-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
    {
        container.css("display","none");
    }
}); 

更新：试试这个

var container = $(".nav-inner div.nav-menu, .mobile-nav-button");

    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
    {
        $(".nav-inner div.nav-menu").slideUp();
    }

Answer 2

我想这就是你要找的：

$('html').click(function() {
//Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});

Answer 3

试试这个：

$( "#menu" ).toggle( "slide" );