堆栈内存溢出
  简体   繁体   English

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

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

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

问题描述

I am using simple nav bar with drop downs. 我正在使用带有下拉菜单的简单导航栏。 However I am not able to click on any of them. 但是，我无法单击其中任何一个。 Below is the code 下面是代码 

 .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>

I am using Gulp to add all the dependencies, After adding dependencies my index.html looks like 我正在使用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>

Below is my Gulp file 以下是我的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)); });

I was not able to figure what is wrong with my code. 我无法弄清楚我的代码出了什么问题。 I am not able to click on the drop downs on nav bar. 我无法点击导航栏上的下拉菜单。

Can someone tell me what is wrong with my code. 有人可以告诉我我的代码有什么问题吗？ Apologies for dumping all the code. 道歉，以转储所有代码。

Appreciate any help 感谢任何帮助

Thank you 谢谢

2 个解决方案

解决方案1
 2 已采纳  2017-04-15 06:34:56

Here is the fiddle: https://jsfiddle.net/besr6sju/ 这是小提琴： 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>

Your dropdown is working fine. 您的下拉列表正常运行。 Can you please specify the exact issue? 您能指定确切的问题吗？

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

在页脚的bootstrap.js之前包括jquery.js脚本。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 下拉菜单与我的导航栏重叠 - Drop Down Menu is Overlapping my Nav Bar 单击下拉式导航菜单 - On-click drop-down nav menu 下拉菜单悬停功能正常，但无法单击 - Drop down menu hover is working but not able to click 导航栏下拉菜单无法正常工作 - nav-bar drop down menu not working properly 有没有办法将导航栏中的 li 下的下拉菜单居中？ - Is there a way to center the drop down menu under the li in the nav bar? 我的导航栏下拉菜单消失在标题后面 - my drop down menu of nav bar disappear behind the header 如何在HTML / PHP中为导航栏创建下拉菜单？ - How to create a drop down menu for a nav bar in HTML/PHP? 如何使用粘性导航栏格式化下拉菜单（无 jQuery） - How to format drop down menu with a sticky nav bar (no jQuery) 如何隐藏` <li> `桌面视图的导航栏中的下拉菜单？ - How to hide `<li>` drop down menu in Nav bar in Desktop view? 出现下拉菜单时，CSS下拉菜单会展开整个导航栏 - CSS drop down menu expands entire nav bar when drop down menu appears
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM