Bootstrap 移动菜单不会保持打开状态

Posted 2023-03-31

技术标签:

【中文标题】Bootstrap 移动菜单不会保持打开状态【英文标题】：Bootstrap mobile menu wont stay open 【发布时间】：2017-05-15 22:26:29 【问题描述】：

这里是第一个问题，感谢您的耐心等待。

我寻找了一个类似的问题，但很惊讶我没有诚实地找到一个。

我也学到了足够的知识来为此创建一个小提琴。你可以在这里看到它

https://jsfiddle.net/jhallwebdev/gm6r6mLu/5/

<body>
<div class="container-fluid">
    <div class="row yellow container-fluid">    <!-- YELLOW NAV ROW -->
        <div class="col-lg-1 col-md-2 col-sm-2 col-xs-2">
            <div>
                <img src="logo.jpeg"  title="logo"   class="my-image">
            </div>
        </div>
        <div class="col-lg-5 col-md-7 col-sm-7 col-xs-7">
            <div class="jer-margin-left">
                <div class="header-title">My Bootstrap Site</div>
                <div class="header-slogan">And its navbar problem...</div>
            </div>
        </div>
        <div class="col-lg-6 col-md-3 col-sm-3 col-xs-3">
            <div>
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <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 class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav jer-nav">
                                <li class="jer-active"><a href="#">HOME <span class="sr-only">(current)</span></a></li>
                                <li><a href="#">ABOUT US</a></li>
                                <li><a href="#">SERVICES</a></li>
                                <li><a href="#">FORMS</a></li>
                                <li><a href="#">CONTACT US</a></li>
                            </ul>
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                </nav>
            </div>
        </div>
    </div>  <!-- END YELLOW NAV ROW -->
</div>  <!-- END CONTAINER -->

CSS

[hidden] 
  display: none;


* 
    box-sizing: border-box;


.yellow 
    background-color: rgb(253, 232, 104);
    width: 100%;


.my-image 
    margin: 10px;


.jer-margin-left 
    margin-left: 15px;


.header-title 
    color: #000;
    font-family: Merriweather;
    font-style: italic;
    font-size: 30px;
    margin: 20px 0 0 0;


.header-slogan 
    color: #000;
    font-family: Merriweather;
    font-style: italic;
    font-size: 22px;


.no-left-margin 
    margin-left: -70px;


.navbar-default 
    background-color: rgb(253, 232, 104);
    border-color: rgb(253, 232, 104);
    padding-top: 20px;


.jer-nav 
    padding-top: 10px;
    padding-bottom: 10px;
    color: #000;
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    text-transform: uppercase;
    float: right;


.navbar-default .navbar-nav>li>a 
    color: #000;


.navbar-default .navbar-nav>li>a:hover 
    color: white;


.container-fluid 
    padding-right: 0;
    padding-left: 0;
    margin: 0;


.jer-active 
    border: silver solid 1px;
    background-color: rgb(253, 232, 104);


@media (max-width: 420px) 
    .jer-margin-left 
        margin-left: 65px;
    


@media (max-width: 600px) 
    .header-title 
        font-size: 22px;
    

    .header-slogan 
        font-size: 15px;
    

    .jer-margin-left 
        margin-left: 45px;
    


@media (max-width: 1200px) 
    .ph-float-right 
        float: none;
        margin-right: 0;
    
    .navbar-header 
        float: none;
    
    .navbar-toggle 
        display: block;
    
    .navbar-collapse 
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    
    .navbar-collapse.collapse 
        display: none!important;
    
    .navbar-nav 
        float: none!important;
        margin: 7.5px -15px;
    
    .navbar-nav>li 
        float: none;
    
    .navbar-nav>li>a 
        padding-top: 10px;
        padding-bottom: 10px;

减小输出窗口的大小以强制移动菜单。（而不是水平文本菜单）

问题 1：要打开移动菜单，我需要单击它两次。这是第一个问题。

问题 2：它不会保持打开状态。

在设置小提琴时，我开始相信这是一个 css 问题，因为当所有 css 都被剥离时，它可以按预期工作。如果我正确设置小提琴，我的 css 在 css 窗口中，并且股票引导 css 通过 jsfiddle 中的外部资源选项进入。

非常感谢您的关注。

【问题讨论】：

【参考方案1】：

这是告诉浏览器将其从视图中删除，您应该将其删除：

.navbar-collapse.collapse 
    display: none!important;

Bootstrap 在任何 data-toggle="collapse" 元素上使用 class="collapse" 和 class="collapse show"。

您已经覆盖了 class="collapse show" 显示元素的能力，因为您已经创建了自己的样式 !important，还因为您通过在选择器中引用两个类来匹配引导选择器的特殊性。

之所以必须“单击两次”是因为 bootstrap 添加了另一个类'collapsing' 来显示过渡，并且当元素为'collapse show collapsing' 时它是可见的，但是当它只有'collapse collapsing' 时它不是。

【讨论】：

我在这里的任何地方都看不到 collapse-show 类。应该是吗？我直接从引导站点复制了导航栏。然后删除了我不需要的部分。我没有删除任何课程。不，这些类是由引导程序的 javascript 添加到元素中的。 (v4-alpha.getbootstrap.com/components/collapse) 当我删除它时，会发生相反的情况。菜单默认打开。当我点击关闭它时，它会重新打开。 @JeremyHall 嗯，当我对你的小提琴进行更改时，我没有得到那种行为：jsfiddle.net/t7ou9to4/1 删除建议的代码和另一部分后，我能够让它正常工作。不过我不记得第二张是什么了。我知道这没有帮助。不过，我确实让它正常工作。谢谢。【参考方案2】：

查看fiddler后，通过删除

    .navbar-collapse.collapse 
        display: none!important;

解决了问题。

在css中删除@media (max-width: 1200px)上面的代码

我无法重现您的第一期。

更新我不确定你删除了什么。这是更新后的代码。

[hidden] 
  display: none;


* 
    box-sizing: border-box;


.yellow 
    background-color: rgb(253, 232, 104);
    width: 100%;


.my-image 
    margin: 10px;


.jer-margin-left 
    margin-left: 15px;


.header-title 
    color: #000;
    font-family: Merriweather;
    font-style: italic;
    font-size: 30px;
    margin: 20px 0 0 0;


.header-slogan 
    color: #000;
    font-family: Merriweather;
    font-style: italic;
    font-size: 22px;


.no-left-margin 
    margin-left: -70px;


.navbar-default 
    background-color: rgb(253, 232, 104);
    border-color: rgb(253, 232, 104);
    padding-top: 20px;


.jer-nav 
    padding-top: 10px;
    padding-bottom: 10px;
    color: #000;
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    text-transform: uppercase;
    float: right;


.navbar-default .navbar-nav>li>a 
    color: #000;


.navbar-default .navbar-nav>li>a:hover 
    color: white;


.container-fluid 
    padding-right: 0;
    padding-left: 0;
    margin: 0;


.jer-active 
    border: silver solid 1px;
    background-color: rgb(253, 232, 104);


@media (max-width: 420px) 
    .jer-margin-left 
        margin-left: 65px;
    


@media (max-width: 600px) 
    .header-title 
        font-size: 22px;
    

    .header-slogan 
        font-size: 15px;
    

    .jer-margin-left 
        margin-left: 45px;
    


@media (max-width: 1200px) 
    .ph-float-right 
        float: none;
        margin-right: 0;
    
    .navbar-header 
        float: none;
    
    .navbar-toggle 
        display: block;
    
    .navbar-collapse 
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    

    .navbar-nav 
        float: none!important;
        margin: 7.5px -15px;
    
    .navbar-nav>li 
        float: none;
    
    .navbar-nav>li>a 
        padding-top: 10px;
        padding-bottom: 10px;

【讨论】：

当我删除该部分时，移动菜单将永久打开。我不希望它默认打开。如果我单击它关闭，它会立即重新打开。就像之前发生的事情相反。删除建议的代码和另一部分后，我能够让它正常工作。不过我不记得第二张是什么了。我知道这没有帮助。不过，我确实让它正常工作。谢谢。【参考方案3】：

也检查一下您的 html 链接中有引导 js 吗？

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

【讨论】：

是的。 bootstrap.min.js 在 jsfiddle 页面的外部资源中对不起，我在检查后看到了 - 上面的解决方案是完全正确的。一般来说，我的做法是不在我自己的 css 文件中使用引导类。【参考方案4】：

我通过确保我拥有相同版本的 boostrap.css 和 bootstrap.js 并确保我在 bootstrap.js 之前加载 jquery 来解决此问题

【讨论】：

以上是关于Bootstrap 移动菜单不会保持打开状态的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 导航栏，新的下拉菜单不会关闭移动视图中已打开的下拉菜单

在内部单击时保持 Bootstrap 下拉菜单打开

当用户在菜单外单击时，如何关闭 Bootstrap 导航栏下拉菜单？

CSS3 下拉菜单不会从 li 和 ul 之间的空白处保持打开状态

子菜单不保持打开状态

单击关闭时保持 Bootstrap 下拉菜单打开