javascript - 单击屏幕上的任意位置时，jQuery 隐藏 Bootstrap 幻灯片菜单

Question

在这里做了一个 fiddle :
https://jsfiddle.net/r94dq2e4/

我正在使用 Twitter Bootstrap 版本 3，当单击导航栏切换按钮时，左侧的菜单中有一个幻灯片。

这是我正在使用的 jQuery 代码:

// Nav
(function ($) {
    'use strict';

    // Toggle classes in body for syncing sliding animation with other elements
    $('#bs-example-navbar-collapse-2')
        .on('show.bs.collapse', function (e) {
            $('body').addClass('menu-slider');
        })
        .on('shown.bs.collapse', function (e) {
            $('body').addClass('in');
        })
        .on('hide.bs.collapse', function (e) {
            $('body').removeClass('menu-slider');
        })
        .on('hidden.bs.collapse', function (e) {
            $('body').removeClass('in');
        });

})(jQuery);

这很好用，第一次点击导航栏切换按钮时，菜单滑入，再次点击时，菜单滑出。我想通过这样一种方式来增强此功能，即当用户单击页面上除菜单本身以外的任何位置时，菜单会滑出。

这是我的菜单 HTML:

切换导航 菜单

                       <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2">    
                           <ul class="nav navbar-nav">
                                <li class="dropdown">   
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Treatments<b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Menu Item</span></a></li>

                                    </ul>
                                </li>
                                <li><a href="#">About Us</a></li> 
                                <li><a href="#">Meet the team</a></li> 
                                <li><a href="#">See the results</a></li> 
                                <li><a href="#">Cost</a></li> 
                                <li><a href="#">Information</a></li> 
                            </ul><!-- end navbar-nav -->
                        </div><!-- end navbar-collapse -->
                    </nav><!-- end navbar -->

我已经开始使用以下 jQuery 代码来实现这一点。但是我需要一些帮助才能从这里开始:

/* Nav click outside hide navbar */
    $(document).click(function(e){

    // Check if click was triggered on or within #menu_content
        if( $(e.target).closest("#navbar2").length > 0 ) {
            return false;
        }
        // Otherwise
        // trigger your click function
         $('body').removeClass('menu-slider');
         $('body').removeClass('in');

    });

谢谢

Answer 1

为了确定是否应该关闭菜单，您需要检查 3 件事:

1. 该元素不是导航本身 (.nav)
2. 元素不是导航容器(.navbar-cllapse)
3. 该元素不是导航的子元素 (.parents('.nav'))

if (!$(e.target).hasClass('navbar-collapse') && !$(e.target).hasClass('nav') && $(e.target).parents('.nav').length == 0) {
    $('#bs-example-navbar-collapse-2').removeClass('in');
}

您可以在这个 fiddle 中尝试: https://jsfiddle.net/r94dq2e4/1/