Bootstrap 3折叠菜单在单击时未关闭答案

【问题标题】：Bootstrap 3 collapse menu not closing on click awayBootstrap 3折叠菜单在单击时未关闭
【发布时间】：2015-05-05 20:15:05
【问题描述】：

我正在尝试构建 Bootstrap 响应式网站，并且正在顶部导航栏上工作。

我了解默认情况下，在较小的屏幕上创建的折叠菜单在点击离开时不会自动关闭/隐藏。

已查找 jquery solution，但此解决方案存在问题。

即使它没有打开，它也会尝试“关闭”折叠菜单，结果是顶部导航栏闪烁。

您能否为上述问题提供更准确的解决方案或正确的“if”语句，以便只有当它打开时才会关闭折叠菜单？

看起来是这样https://jsfiddle.net/vkiril3/gb1Lfkjk/

请如附图所示展开结果窗口，您将看到搜索（放大镜）按钮。现在，刷新并单击结果内的某处。顶部栏会闪烁。

在这里我捕捉到了闪烁

    <body>
    <nav class="navbar navbar-custom navbar-fixed-top"> <a class="navbar-brand" href="#">
            <img alt="Brand" src="images/logo70.png" /></a>

        <div class="container">
            <div class="navbar-header">
                <div class="btn-group pull-left">
                    <button type="button" class="btn btn-oldstyle navbar-btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">כניסת עובד&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-left" role="menu" style="padding: 15px; min-width: 250px;">
                        <form>
                            <input type="email" class="form-control" id="exampleInputEmail1" style="direction: ltr;" placeholder="Username" required="required" autofocus="autofocus" />
                            <input type="password" class="form-control" id="exampleInputPassword1" style="direction: ltr;" placeholder="Password" required="required" />
                            <div class="checkbox pull-right">
                                <label>
                                    <input type="checkbox" /><span style="padding-right: 25px;">זכור אותי</span>

                                </label>
                            </div>
                            <button type="submit" class="btn btn-oldstyle btn-block">כניסה</button>
                        </form>
                    </ul>
                </div>
                <div class="btn-group navbar-left visible-sm" style="padding-left: 15px;">
                    <button type="button" class="btn btn-oldstyle navbar-btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-left" role="menu">
                        <form class="navbar-form" role="search" style="direction: ltr;">
                            <div class="form-group">
                                <div class="input-group"> <span class="input-group-btn">
                                        <button class="btn btn-oldstyle" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                    </button>
                                    </span>
                                    <input type="text" class="form-control" placeholder="חיפוש באתר" style="direction: rtl; width: 250px" />
                                </div>
                            </div>
                        </form>
                    </ul>
                </div>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                </button>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active navbar-right"><a href="#">דף הבית</a>
                    </li>
                    <li class="navbar-right"><a href="#">אירועים</a>
                    </li>
                    <li class="navbar-right"><a href="#">אודותינו</a>
                    </li>
                    <li class="navbar-right"><a href="#">צור קשר</a>
                    </li>
                </ul>
                <form class="navbar-form navbar-left hidden-sm" role="search" style="direction: ltr;">
                    <div class="form-group">
                        <div class="input-group"> <span class="input-group-btn">
                                <button class="btn btn-oldstyle" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                            </span>
                            <input type="text" class="form-control" placeholder="חיפוש באתר" style="direction: rtl;" />
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </nav>
    <script type="text/javascript">
        $('.dropdown-menu').click(function(event) {
            event.stopPropagation();
        }); // Prevent dropdown menu from closing
    </script>
    <script>
        $(document).on('click', function() {
            $('.collapse').collapse('hide');
        })
    </script>
</body>

【问题讨论】：

究竟是什么试图关闭您的导航栏菜单，即使它没有展开？看起来您的 JSFiddle 工作正常 - 在 Chrome 上进行了测试。
嗨，Alex，在我提供的 JSFiddle 链接中，请将“结果”部分向左展开，直到出现“放大镜”按钮。现在请刷新页面，然后单击某处的“结果”部分。你应该看到闪烁。我使用的 jquery 脚本试图关闭菜单，即使没有什么可以关闭。
打印屏幕附在上面。
希伯来语中的“放大镜”是什么？
Zhuhit Magdelet。看我上面的屏幕截图:-)

标签： jquery css twitter-bootstrap-3 responsive-design collapse

【解决方案1】：

这是我从几个与此问题相关的 jquery 脚本中制定的 jquery 解决方案。

还有什么更整洁的吗？请给出你对逻辑的看法。

<script>
    $('body').click(function (event) {
        // only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called 
        if (!($(event.target).is('#navbar *')) && $(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible")) {
            $('.navbar-collapse').collapse('toggle');
        }
    });
</script>

【讨论】：