堆棧內存溢出
  簡體   English   中英

無法單擊導航欄上的下拉菜單

[英]Not able to click on drop down menu on Nav bar

 原文  2017-04-15 06:17:06  8   2    html/ angularjs/ twitter-bootstrap/ css3

問題描述

我正在使用帶有下拉菜單的簡單導航欄。 但是，我無法單擊其中任何一個。 下面是代碼 

 .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)); });

我無法弄清楚我的代碼出了什么問題。 我無法點擊導航欄上的下拉菜單。

有人可以告訴我我的代碼有什么問題嗎？ 道歉，以轉儲所有代碼。

感謝任何幫助

謝謝

2 個解決方案

解決方案1
 2 已采納  2017-04-15 06:34:56

這是小提琴： 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>

您的下拉列表正常運行。 您能指定確切的問題嗎？

解決方案2
 0  2017-04-15 12:18:33

在頁腳的bootstrap.js之前包括jquery.js腳本。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 下拉菜單與我的導航欄重疊 單擊下拉式導航菜單 下拉菜單懸停功能正常，但無法單擊 導航欄下拉菜單無法正常工作 有沒有辦法將導航欄中的 li 下的下拉菜單居中？ 我的導航欄下拉菜單消失在標題后面 如何在HTML / PHP中為導航欄創建下拉菜單？ 如何使用粘性導航欄格式化下拉菜單（無 jQuery） 如何隱藏` <li> `桌面視圖的導航欄中的下拉菜單？ 出現下拉菜單時，CSS下拉菜單會展開整個導航欄
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM