0
我正在使用带有下拉菜单的简单导航栏。但是我无法点击其中的任何一个。下面是代码无法点击导航栏上的下拉菜单
.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>我使用咕嘟咕嘟添加所有的依赖关系， 添加依赖关系后，我的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));
});我无法弄清楚什么是错我的代码。我无法点击导航栏上的下拉菜单。
有人能告诉我我的代码有什么问题。为转储所有代码抱歉。
感谢所有帮助
谢谢
下拉菜单看起来很好。你能更具体地了解这个问题吗？ –
嗨丹，当我点击下拉列表时，下拉列表不显示。 – dharan
你可以发布你的gulp文件吗？ –