单击时，Bootstrap下拉列表无法在移动设备上运行
[英]Bootstrap dropdown not working on mobile on click
问题描述
I have added a dropdown to my website but it is not working properly on mobile devices when the nav bar is collapsed. 
我在我的网站上添加了一个下拉菜单，但当导航栏折叠时，它在移动设备上无法正常工作。 When I click on dropdown it closes the navbar instead of showing the items under the dropdown. 当我点击下拉列表时，它会关闭导航栏，而不是显示下拉列表下的项目。
.dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header page-scroll"> <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" href="#page-top">Name</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="hidden"> <a href="#page-top"></a> </li> <li class="page-scroll"> <a href="#portfolio">Portfolio</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Games <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="/Spikes" target="_blank">Avoid The Spikes</a></li> <li><a href="/SpaceShooter" target="_blank">Space Shooter</a></li> <!--<li role="separator" class="divider"></li>--> <!--<li class="dropdown-header">Nav header</li>--> <!--<li><a href="#">Separated link</a></li>--> </ul> </li> </ul> </div> </div>
2 个解决方案
解决方案1
0 已采纳 2019-06-10 07:22:51
Is this what you were looking for? 这是你在找什么？ Navbar with sub-menu 带有子菜单的导航栏
(function($) { $(document).ready(function() { $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { event.preventDefault(); event.stopPropagation(); $(this).parent().siblings().removeClass('open'); $(this).parent().toggleClass('open'); }); }); })(jQuery);
.dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #cccccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover>a:after { border-left-color: #555; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } /* @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { } */
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <div class="container pen"> <div class="row"> <div class="col-sm-12"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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" href="#" target="_blank">Brand</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Active Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Dropdown 1</a></li> <li><a href="#">Dropdown 2</a></li> <li><a href="#">Dropdown 3</a></li> <li class="divider"></li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 4</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu 4.1</a></li> <li><a href="#">Dropdown Submenu 4.2</a></li> <li><a href="#">Dropdown Submenu 4.3</a></li> <li><a href="#">Dropdown Submenu 4.4</a></li> </ul> </li> <li class="dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 5</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu 5.1</a></li> <li><a href="#">Dropdown Submenu 5.2</a></li> <li><a href="#">Dropdown Submenu 5.3</a></li> <li class="divider"></li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu 5.4.1</a></li> <li><a href="#">Dropdown Submenu 5.4.2</a></li> <li class="divider"></li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.3</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu 5.4.3.1</a></li> <li><a href="#">Dropdown Submenu 5.4.3.2</a></li> <li><a href="#">Dropdown Submenu 5.4.3.3</a></li> <li><a href="#">Dropdown Submenu 5.4.3.4</a></li> </ul> </li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.4</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu 5.4.4.1</a></li> <li><a href="#">Dropdown Submenu 5.4.4.2</a></li> <li><a href="#">Dropdown Submenu 5.4.4.3</a></li> <li><a href="#">Dropdown Submenu 5.4.4.4</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Link 1</a></li> <li><a href="#">Dropdown Link 2</a></li> <li><a href="#">Dropdown Link 3</a></li> <li class="dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu Link 4.1</a></li> <li><a href="#">Dropdown Submenu Link 4.2</a></li> <li><a href="#">Dropdown Submenu Link 4.3</a></li> <li><a href="#">Dropdown Submenu Link 4.4</a></li> </ul> </li> <li class="dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu Link 5.1</a></li> <li><a href="#">Dropdown Submenu Link 5.2</a></li> <li><a href="#">Dropdown Submenu Link 5.3</a></li> <li class="divider"></li> <li class="dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu Link 5.4.1</a></li> <li><a href="#">Dropdown Submenu Link 5.4.2</a></li> <li class="divider"></li> <li class="dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li> <li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li> <li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li> <li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li> </ul> </li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li> <li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li> <li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li> <li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </nav> </div> </div> </div> </body> </html>
解决方案2
0 2019-06-10 08:01:05
Your script and link tags are misplaced in the code snippet. 您的script和link标记放在代码段中。 These tags should be placed in your HTML file. 这些标记应放在HTML文件中。 The link tag must be placed in the head tag. 链接标记必须放在head标记中。 I made an edit to your question thinking you made a mistake, but placing those tags where they belong achieves the desired result: 我对您的问题进行了编辑，认为您犯了一个错误，但将这些标记放在他们所属的位置可以达到预期的效果：
.dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header page-scroll"> <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" href="#page-top">Name</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="hidden"> <a href="#page-top"></a> </li> <li class="page-scroll"> <a href="#portfolio">Portfolio</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Games <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="/Spikes" target="_blank">Avoid The Spikes</a></li> <li><a href="/SpaceShooter" target="_blank">Space Shooter</a></li> <!--<li role="separator" class="divider"></li>--> <!--<li class="dropdown-header">Nav header</li>--> <!--<li><a href="#">Separated link</a></li>--> </ul> </li> </ul> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Bootstrap Dropdown链接无法在移动设备上运行 - Bootstrap Dropdown links not working mobile
Bootstrap导航栏下拉菜单在移动设备中不起作用 - Bootstrap navbar dropdown not working in mobile
单击下拉菜单移动不起作用 - Click Dropdown Menu Mobile Not Working
移动点击下拉菜单不起作用？ - Mobile on click dropdown menu not working?
Bootstrap登录下拉菜单“单击”不起作用 - Bootstrap Login Dropdown “click” not working
Bootstrap 4 导航下拉菜单 hover 在桌面/点击移动 - Bootstrap 4 nav dropdown hover on desktop / click mobile
一页引导下拉列表在移动设备上不起作用 - One page bootstrap dropdown not working on mobile device
Bootstrap 3 多级下拉菜单在移动设备中不起作用 - Bootstrap 3 multi level dropdown menu not working in mobile
AngularJs ng-click在Bootstrap下拉菜单上不起作用 - AngularJs ng-click not working on Bootstrap dropdown
Bootstrap：当引导下拉菜单中的按钮时，单击事件不起作用 - Bootstrap: Click event not working when button inside bootstrap dropdown
相关标签