Question

你好我的问题是我有一个带有bootstrap的响应式菜单菜单我想在桌面上的响应式视图关闭菜单它很好但在响应式视图我想要当我在任何区域的导航菜单外面点击它应该关闭，我的导航代码正在关注

<!-- 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" );

如何关闭自适应菜单，点击导航

3 个答案: