Bootstrap dropdown not working on mobile on click
Question
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 answers
solution1
0 ACCPTED 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>
solution2
0 2019-06-10 08:01:05
Your script and link tags are misplaced in the code snippet. These tags should be placed in your HTML file. The link tag must be placed in the head tag. 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap Dropdown links not working mobile
Bootstrap navbar dropdown not working in mobile
Click Dropdown Menu Mobile Not Working
Mobile on click dropdown menu not working?
Bootstrap Login Dropdown “click” not working
Bootstrap 4 nav dropdown hover on desktop / click mobile
One page bootstrap dropdown not working on mobile device
Bootstrap 3 multi level dropdown menu not working in mobile
AngularJs ng-click not working on Bootstrap dropdown
Bootstrap: Click event not working when button inside bootstrap dropdown
Related Tags