html - 无法单击导航栏上的下拉菜单

Question

我正在使用带有下拉菜单的简单导航栏。但是我无法点击其中任何一个。下面是代码

.search-box{
    margin-top: 10px;
    width: 200px;
    border-radius: 5px;
}
#btn1{
    background-color:transparent;
}

.top-banner{
    text-align: center;
    background-color:#595959 ;
}

.dropdown-menu {
    min-width: 200px;
}

.dropdown-menu.columns-3 {
    min-width: 600px;
}
.dropdown-menu li a {
    padding: 5px 15px;
    font-weight: 300;
}
.multi-column-dropdown {
    list-style: none;
}
.multi-column-dropdown li a {
    display: block;
    clear: both;
    line-height: 1.428571429;
    color: #333;
    white-space: normal;
}
.multi-column-dropdown li a:hover {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5;
}

@media (max-width: 767px) {
    .dropdown-menu.multi-column {
        min-width: 240px !important;
        overflow-x: hidden;
    }
}

<div class="row" id="top-banner">

        <div class="col-xs-12 col-sm-11">
            <nav class="navbar navbar-inverse bg-inverse">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" >Movie Flix</a>
                    <input type="search" class="search-box" placeholder="Search" >
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Select Type <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Movies</a></li>
                                <li><a href="#">Series</a></li>

                            </ul>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Genre <b class="caret"></b></a>
                            <ul class="dropdown-menu multi-column columns-3">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <ul class="multi-column-dropdown">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Adventure</a></li>
                                            <li><a href="#">Sci-Fi</a></li>
                                            <li><a href="#">Thriller</a></li>
                                            <li><a href="#">Crime</a></li>
                                            <li><a href="#">News</a></li>
                                            <li><a href="#">Talkshow</a></li>


                                        </ul>
                                    </div>
                                    <div class="col-sm-4">
                                        <ul class="multi-column-dropdown">
                                            <li><a href="#">Drama</a></li>
                                            <li><a href="#">Fantasy</a></li>
                                            <li><a href="#">Comedy</a></li>
                                            <li><a href="#">History</a></li>
                                            <li><a href="#">Biography</a></li>
                                            <li><a href="#">Documentary</a></li>
                                            <li><a href="#">War</a></li>


                                        </ul>
                                    </div>
                                    <div class="col-sm-4">
                                        <ul class="multi-column-dropdown">
                                            <li><a href="#">Mystery</a></li>
                                            <li><a href="#">Romance</a></li>
                                            <li><a href="#">Western</a></li>
                                            <li><a href="#">Animation</a></li>
                                            <li><a href="#">Horror</a></li>

                                            <li><a href="#">Family</a></li>

                                        </ul>
                                    </div>
                                </div>
                            </ul>
                        </li>


                    </ul>
                </div>
                <!--/.navbar-collapse-->
            </nav>
        </div>


    </div>

我正在使用 Gulp 添加所有依赖项， 添加依赖项后，我的 index.html 看起来像

<!DOCTYPE html>
<html lang="en" ng-app="movieflix">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<!--bower:css -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<!--endinject-->
<!--vendor:css-->
<!--endinject-->
<!--inject:css-->
<link rel="stylesheet" href="styles/catalog.tmpl.css">
<!--endinject-->
<!--app:css-->
<!--endinject-->
<body>
<header>

</header>
<section  ng-view>

</section>
<footer>

</footer>
<!--bower:js-->
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!--endinject-->
<!--inject:js-->
<script src="app/modules/movieflixmodule.js"></script>
<script src="app/services/login.service.js"></script>
<script src="app/services/catalog.service.js"></script>
<script src="app/controllers/signup.controller.js"></script>
<script src="app/controllers/login.controller.js"></script>
<script src="app/controllers/catalog.controller.js"></script>
<script src="app/app.js"></script>
<!--endinject-->

<!--vendor:js-->
<!--endinject-->

<!--app:js-->
<!--endinject-->
</body>
</html>

下面是我的 Gulp 文件

gulp=require('gulp'),
clean =require('gulp-clean'),
inject=require('gulp-inject'),
bowerfiles=require('main-bower-files'),
gulpfilter=require('gulp-filter'),
angularFileSort=require('gulp-angular-filesort'),
concat=require('gulp-concat'),
cleanCss=require('gulp-clean-css'),
cleanJS=require('gulp-uglify'),
merge=require('merge-stream'),
browserSync=require('browser-sync').create();

var config={
  paths:{
      src:'./src',
      build:'./build',
      bower:'./bower_components'
  }
};

gulp.task('clean',function(){

return gulp.src(config.paths.build,{read:false}).pipe(clean());
});

gulp.task('inject',function(){
   var cssFiles=gulp.src([config.paths.src+'/**/*.css'],{read:false});

   var jsFiles=gulp.src([config.paths.src+'/**/*.js']);

   return gulp.src(config.paths.src+'/index.html').
   pipe(inject(gulp.src(bowerfiles(),{read:false}),{name:'bower'}))
       .pipe(inject(cssFiles,{
       ignorePath:'src',addRootSlash:false
   })).
   pipe(inject(jsFiles.pipe(angularFileSort()),{
       ignorePath:'src',addRootSlash:false
   })).pipe(gulp.dest(config.paths.build));

});

gulp.task('serve',['inject'],function(){
    browserSync.init({
        server:{
            baseDir:[config.paths.build,config.paths.bower,config.paths.src],
            routes:{
             '/bower_components':'bower_components'
            }
        },
        files:[
            config.paths.src+'/**'
        ]

    })
});

gulp.task('minifyCss',function(){
var vendorStyles=gulp.src(bowerfiles()).pipe(gulpfilter(['**/*.css'])).
    pipe(concat('vendor.min.css')).
    pipe(cleanCss({debug:true})).
    pipe(gulp.dest(config.paths.build+'/styles'));

var appStyles=gulp.src(config.paths.src+'/**/*.css').
    pipe(concat('app.min.css')).
    pipe(cleanCss({debug:true})).
    pipe(gulp.dest(config.paths.build+'/styles'));

return merge(vendorStyles,appStyles);
});

gulp.task('minifyJS',function(){
    var vendorJS=gulp.src(bowerfiles()).pipe(gulpfilter(['**/*.js'])).
        pipe(concat('vendor.min.js')).
        pipe(cleanJS({debug:true})).
        pipe(gulp.dest(config.paths.build+'/scripts'));

var appJS=gulp.src(config.paths.src+'/**/*.js').
    pipe(angularFileSort()).
    pipe(concat('app.min.js')).
    pipe(cleanJS({debug:true})).
    pipe(gulp.dest(config.paths.build+'/scripts'));

return merge(vendorJS,appJS);


});

gulp.task('html',function(){
    return gulp.src([config.paths.src+'/**/*.html','!'+config.paths.src+'/index.html'])
        .pipe(gulp.dest(config.paths.build));

});

gulp.task('fonts',function(){
    return gulp.src(bowerfiles()).pipe(gulpfilter(['**/*.{svg,eot,tt,woff,woff2}'])).
        pipe(gulp.dest(config.paths.build+'/fonts'));
});

gulp.task('other',function(){
    return gulp.src([config.paths.src+'/**/*','!**/*.html','!**/*.css','!**/*.js']).
        pipe(gulp.dest(config.paths.build+'/other'));
});


gulp.task('build',['html','fonts','other','minifyJS','minifyCss'],function(){
    var vendorFiles=gulp.src([config.paths.build+'/styles/vendor.min.css',config.paths.build+'/scripts/vendor.min.js'],{read:false});
    var appFiles=gulp.src([config.paths.build+'/styles/app.min.css',config.paths.build+'/scripts/app.min.js'],{read:false});


    return gulp.src(config.paths.src+'/index.html').
        pipe(inject(vendorFiles ,{name:'vendor',ignorePath:'build',addRootSlash:false})).
        pipe(inject(appFiles,{name:'app',ignorePath:'build',addRootSlash:false})).
    pipe(gulp.dest(config.paths.build));

});

我无法弄清楚我的代码有什么问题。我无法点击导航栏上的下拉菜单。

谁能告诉我我的代码有什么问题。为转储所有代码而道歉。

感谢任何帮助

谢谢

Answer 1

这是 fiddle :https://jsfiddle.net/besr6sju/

<div class="row" id="top-banner">

    <div class="col-xs-12 col-sm-11">
        <nav class="navbar navbar-inverse bg-inverse">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" >Movie Flix</a>
                <input type="search" class="search-box" placeholder="Search" >
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Select Type <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Movies</a></li>
                            <li><a href="#">Series</a></li>

                        </ul>
                    </li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Genre <b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-3">
                            <div class="row">
                                <div class="col-sm-4">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Adventure</a></li>
                                        <li><a href="#">Sci-Fi</a></li>
                                        <li><a href="#">Thriller</a></li>
                                        <li><a href="#">Crime</a></li>
                                        <li><a href="#">News</a></li>
                                        <li><a href="#">Talkshow</a></li>


                                    </ul>
                                </div>
                                <div class="col-sm-4">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Drama</a></li>
                                        <li><a href="#">Fantasy</a></li>
                                        <li><a href="#">Comedy</a></li>
                                        <li><a href="#">History</a></li>
                                        <li><a href="#">Biography</a></li>
                                        <li><a href="#">Documentary</a></li>
                                        <li><a href="#">War</a></li>


                                    </ul>
                                </div>
                                <div class="col-sm-4">
                                    <ul class="multi-column-dropdown">
                                        <li><a href="#">Mystery</a></li>
                                        <li><a href="#">Romance</a></li>
                                        <li><a href="#">Western</a></li>
                                        <li><a href="#">Animation</a></li>
                                        <li><a href="#">Horror</a></li>

                                        <li><a href="#">Family</a></li>

                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>


                </ul>
            </div>
            <!--/.navbar-collapse-->
        </nav>
    </div>


</div>

您的下拉菜单工作正常。你能具体说明具体问题吗？