jquery - Bootstrap 移动导航栏在加载时打开并且不会切换

Question

嘿伙计们，我有点困惑为什么我的移动导航栏在页面加载时打开并且不会切换。我已经从我制作的其他移动导航栏中复制了代码，但显然我遗漏了。

只是让您知道导航栏只为小型设备显示，因为大型设备的导航栏是分开的。

Here is the fiddle

这是我的 HTML:

<div class="navbar navbar-default nav-links navbar-fixed-top hidden-md hidden-lg">
    <div class="container">
        <button class="visible-sm visible-xs navbar-toggle" type="button"
                data-target="#i-want-this-to-collapse" data-toggle="collapse" >
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
        </button>
        <a class="mini-navbar navbar-brand" href="/">
            <img src="media/img/nav-logo.png" alt="Driven Car Sales Logo"
                 class="img-rounded logo-nav mini-navbar" />
        </a>
        <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Join us</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    About<strong class="caret"></strong>
                </a>
                <ul class="dropdown-menu">
                    <li> <a href "#">The Team</a></li>
                    <li> <a href "#">Our Partners</a></li>
                </ul>
            </li>
            <li><a href="#">How To Find Us</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>

这是我的 CSS:

.mini-navbar {
    opacity: 1;
    padding: 5px 0;
}

@media only screen and (max-width : 992px) {
    /*body {display: none;}*/
    .navbar-nav > li {
        float: none;
    }
    .navbar-nav {
        float: none;
    }
    .nav.navbar-nav {
        clear: both;
        float: left;
        margin: 0 0 0 -15px;
        width: 100%;
    }
    .navbar-default .navbar-nav>li>a {
        border: none;
    }

    .navbar-nav > li:last-child {
        border: none;
    }
    .navbar-default {

    }
}

知道我哪里出错了吗？

Answer 1

您需要将切换按钮和导航栏品牌 anchor 包裹在导航栏标题中:

<div class="navbar-header"><!-- --></div>

您需要将导航栏-导航菜单项列表包装在导航栏折叠部分中:

<div class="navbar-collapse collapse"><!-- --></div>

最重要的是，用于切换的 data-target 采用了您要切换的部分的 CSS 选择器。您目前拥有:

<button data-target="#i-want-this-to-collapse" data-toggle="collapse" >

但没有匹配选择器 #i-want-this-to-collapse 的内容，即具有该 ID 的内容。所以在你的 navbar-collapse 中添加一个:

<div class="navbar-collapse collapse" id="i-want-this-to-collapse">

Here's a working demo in fiddle

查看 fiddle 以获取完整代码。

以后，我将从 docs 中的示例开始并朝着自己的解决方案努力，这样您就可以找出一路上哪里出了问题。暂停，然后后退几步，看看它是否有意义。如果不是，请问那个问题，因为这可能是一个更好的问题，即为什么x 不起作用？我认为它会y。