css - Bootstrap 移动导航栏不工作

Question

我正在开发基于 bootstrap 的移动导航栏。

这是我的标记

    <nav class="navbar">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>
                <a class="navbar-brand" href="index.html"><img src="images/logo.png" class="img-responsive" /></a>
            </div>
            <div class="collapse navbar-collapse" id="collapse-1">
                <ul class="nav navbar-nav navbar-right" role="navigation" >
                    <li class="active"><a href="">blah</a></li>
                    <li><a href="">blah</a></li>
                    <li><a href="">blah</a></li>
                    <li><a href="">blah</a></li>
                    <li><a href="">blahs</a></li>
                    <li><a href="">blags</a></li>
                    <li><a href="" style="padding-right:0;">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

这是我的CSS文件

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Montserrat:400,700);
/* index.html (mobile)*/
@media only screen and (max-width: 768px) {
/*    * {
    border: 1px dashed red;
    }*/

}


body {
    font-family:'Open Sans';
    color:#7f7f7f;
    font-size:14px;
    line-height:1.7;
}

p { margin-bottom: 13px; }
hr { border-top: 1px solid #D0D0D0; }
.no-padding { padding:0; }
.no-margin { margin:0; }
.mt40 { margin-top:40px; }
.mb40 { margin-bottom:40px; }
.mt60 { margin-top:60px; }
.mb60 { margin-bottom:60px; }
.mt50 { margin-top:50px; }
.mb45 { margin-bottom:45px; }
.pt60 { padding-top:60px; }
.pb60 { padding-bottom:60px; }
.pb50 { padding-bottom:50px; }
.pt50 { padding-top:50px; }
.pb45 { padding-bottom:45px; }
.bg-white { background-color:#fff; }
.bg-grey { background-color:#EAEAEA; }

.navbar {
    font-family:'Montserrat';
    font-size:12px;
    text-transform:uppercase;
    background-color:#fff;
    height:80px;
    box-shadow: 0 4px 0 -2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 4px 0 -2px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0 4px 0 -2px rgba(0, 0, 0, 0.05);
    margin-bottom:0;
}
.navbar-brand {

    height:79px;
    padding:27px 15px;
}

.navbar-nav>li>a {
    line-height:50px;
    color:#a1a1a1;
}
#bg-boxed {
    background-image: url(../images/pattern.png);
    background-repeat: repeat;
    height: 100%;
}
.boxed {
    background-color: #fff;
    max-width: 1250px;
    margin: 0 auto !important;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1), inset 0 0 2px rgba(255,255,255,.21);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1), inset 0 0 2px rgba(255,255,255,.21);
    box-shadow: 0 1px 2px rgba(0,0,0,.1), inset 0 0 2px rgba(255,255,255,.21);
    height: 100%;
}
.nav>li>a:focus, .nav>li>a:hover {
    background-color:transparent;
    color:#0087ff;
}
.nav>li .active {
    color:#0087ff;
}
.hero-home { background:url(../images/hero-bg.jpg); height:300px; background-size:cover; border-right:1px solid #595959; border-left:1px solid #595959;}
.hero-description { color:#fff; }
.hero-home h1 { color:#fff; font-family:'Open Sans'; font-size:24px; font-weight:300; font-size:36px; margin:0; }

.vcenter {
  position:relative;
  top:50%;
  transform:translateY(-50%);
}

.btn-hero {
    color:#FFF;
    background-color:#0087ff;
    padding:14px 28px;
    border:0;
    border-radius:25px;
}
.btn-hero2 {
    color:#FFF;
    background-color:#1B94FF;
    padding:14px 28px;
    border:0;
    border-radius:25px;
}
.btn-hero.active, .btn-hero.focus, .btn-hero:active, .btn-hero:focus, .btn-hero:hover, .open>.dropdown-toggle.btn-hero {
    color:#fff;
    background-color:#097CE2;
}
.btn-hero2.active, .btn-hero2.focus, .btn-hero2:active, .btn-hero2:focus, .btn-hero2:hover, .open>.dropdown-toggle.btn-hero2 {
    color: #fff;
    background-color:#197ED8;
}

#owl-demo .item{
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}

.owl-theme .owl-controls .owl-nav [class*=owl-] {
    color: #fff;
    font-size: 14px;
    margin: 0 5px 0 0;
    padding: 8px 14px;
    background: #B5B5B5;
    display: inline-block;
    cursor: pointer;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat';
    margin-top:0;
    color:#363636;
    margin-bottom: 13px;
}

.owl-controls { background:url(http://demo.fifothemes.com/pixma/General/img/bg_off.png) repeat-x center; }
.owl-nav {
    text-align: right;
    margin-top: 15px;
}

.thumbnail { margin-bottom:0; border-radius:3px; }

.title {
    background:url(http://demo.fifothemes.com/pixma/General/img/bg_off.png) repeat-x center;
    margin-bottom:20px;
}
.owl-theme .owl-controls .owl-buttons div{
    color: #FFF;
    display: inline-block;
    zoom: 1;
    display: inline;/*IE7 life-saver */
    margin: 5px;
    padding: 3px 10px;
    font-size: 12px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background: #869791;
    filter: Alpha(Opacity=50);/*IE7 fix*/
    opacity: 0.5;
}
.section-title {
    padding-right:25px;
    padding-left: 25px;
}
.panel { border:0; }
.caption-allshows {
    position:absolute;
    top:0;
    right:0;
    background:rgba(66, 139, 202, 0.9);
    width:100%;
    height:100%;
    padding:2%;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
    border-radius:3px;
}
.owl-next { margin:0 !important; }
.caption-allshows h4 { margin-bottom:3px; color:#fff; }
.caption-allshows p { font-family:'Montserrat'; font-size:11px; }
.thumbnail .caption-allshows { padding-top:30%; }
.panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body { border-top:0; }
.panel-title {
    font-family: 'Open Sans';
    font-size:14px;
}
.panel-group {
    margin-bottom:0;
}
.panel-default>.panel-heading {
    color: #fff;
    background-color: #1B94FF;
    border-color: #ddd;
    border: 0;
}
.panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: #ddd;
    color: #969696;
    background: #F4F4F4;
    padding:10px 15px;
}
.panel-heading {
    border-top-left-radius:0;
    border-top-right-radius:0;
    padding: 15px 15px;
}

.footer {
    padding: 40px 0 30px 0;
    background-color: #272727;
    color: #8F8F8F;
    vertical-align: bottom;
}
.bordered-icon-lg {
    border-radius: 0;
    font-size: 34px !important;
    border-radius: 50%;
    color: #fff;
    background-color: #1B94FF;
    padding-top: 28px;
    height: 90px;
    text-align: center;
    width: 90px;
}

.number-holder {
    background-color:#f5f5f5;
    text-align:center;
    padding:30px;
    border:1px solid #e2e2e2;
}
.number-holder p { margin-top:15px; margin-bottom:15px; }
.number-title { 
    font-size:48px;
    text-transform:uppercase;
    color:#838383;
    font-family:'Open Sans';
    font-weight:800;
    margin:0;
    line-height: .8;
}

/** About **/
div.title h3 {
    text-align: center;
}

/** Shows **/
.hero-show {
    background:url(../images/shows/palmtrees.jpg);
    height:300px;
    background-size:cover;
    border-right:1px solid #595959;
    border-left:1px solid #595959;
    background-attachment: fixed;   

}

和我的 js 文件，但我很确定这不是 js 问题，因为我没有收到任何控制台错误

<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>
<script type="text/javascript" src="js/jquery.animateNumber.js"></script>
<script type="text/javascript" src="js/main.js"></script>

但是每当我单击我的按钮元素使我的类别下拉时，它不会推送我的内容。有什么问题吗？我相信我正确地遵循了所有文档。

Answer 1

html 看起来不错。但是您的 jQuery 文件似乎丢失了。只需添加这一行:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 在列表顶部的所有其他 javascript 文件之前，看看是否能解决问题。