个人中心
gpt4 book ai didi

jquery - Bootstrap 3折叠菜单不会在点击时关闭

转载 作者：行者123 更新时间：2023-11-28 12:12:31 24 4
gpt4 key购买 nike

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

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

寻找 jquery solution但此解决方案存在问题。

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

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

它的样子https://jsfiddle.net/vkiril3/gb1Lfkjk/

请如附图所示展开“结果”窗口，这样您就会看到“搜索”(放大镜)按钮。现在，刷新并单击结果中的某处。顶部栏会闪烁。

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>

最佳答案

这是我根据发现的与此问题相关的几个 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>

关于jquery - Bootstrap 3折叠菜单不会在点击时关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28861274/

24 4 0
文章推荐： Javascript 在点击时隐藏/显示不起作用
文章推荐： swift - 使用结果对象的 FBSDKGraphRequest 问题
文章推荐： javascript - 功能性 react 组件上的窗口对象出现问题
文章推荐： Javascript 将数组元素相互组合的最有效方法