Question

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

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

注意jquery solution，但此解决方案存在问题。

它试图＆＃34;关闭＆＃34;折叠菜单，即使它没有打开，结果是顶部导航栏闪烁。

请帮助您提供更准确的解决方案或正确的＆＃34; if＆＃34;上面的声明，所以它只有在打开时关闭折叠菜单？

看起来如何https://jsfiddle.net/vkiril3/gb1Lfkjk/

请展开结果窗口，如图所示，这样您就可以看到搜索（放大镜）按钮。现在，刷新并单击Result中的某个位置。顶部栏会闪烁。

Print Screen

在这里，我抓住了闪烁的

Flicker

    <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>

Answer 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>

点击后，Bootstrap 3折叠菜单没有关闭

1 个答案: