Bootstrap 3 折叠菜单不会在单击时关闭 [英] Bootstrap 3 collapsed menu doesn't close on click

查看：34
本文介绍了Bootstrap 3 折叠菜单不会在单击时关闭的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我或多或少有一个来自 bootstrap 3 的标准导航

<!-- ---------- 导航 ---------- --><div class="navbar navbar-fixed-top" role="navigation"><div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">切换导航</span><a class="navbar-brand" href="index.html"><img src="#"></a>

<div class="navbar-collapse collapse"><ul class="nav navbar-nav navbar-right"><li class="active"><a href="#home">首页</a></li><li><a href="#one">One</a></li><li><a href="#two">Two</a></li><li><a href="#three">三</a></li><li><a href="#four">四</a></li>

它在较小的设备上正常折叠.单击菜单按钮可展开菜单，但如果我单击(或触摸)菜单链接，菜单将保持打开状态.我该怎么办，再次关闭它?

解决方案

Bootstrap 的默认设置是在您单击菜单项时保持菜单打开.您可以通过在要折叠的 jQuery 元素上调用 .collapse('hide'); 来手动覆盖此行为.

I have a more or less standard navigation from bootstrap 3

<body data-spy="scroll" data-target=".navbar-collapse">
    <!-- ---------- Navigation ---------- -->
    <div class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="index.html"> <img src="#"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#one">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#three">Three</a></li>
                    <li><a href="#four">Four</a></li>
                </ul>
            </div>
        </div>
    </div>

It collapses normally on smaller devices. Clicking on the menu button expands the menu but if I click (or touch for that matter) on a menu link, the menu stays open. What do I have to do, to close it again?

解决方案

Bootstrap's default setting is to keep the menu open when you click on a menu item. You can manually override this behaviour by calling .collapse('hide'); on the jQuery element that you want to collapse.

这篇关于Bootstrap 3 折叠菜单不会在单击时关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆