side nav dropdown menu not opening with bootstrap
Question
I need to implement a side nav menu with sub menu the problem that I am facing is that the sub menu or dropdown are not opening , or not collapsing if they were open by default .
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<a href="#"><i class=""></i> UI Elements <span class="arrow"></span></a>
</li>
<ul class="sub-menu" id="products">
<li class="active"><a href="#">CSS3 Animation</a></li>
<li><a href="#">General</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Tabs & Accordions</a></li>
<li><a href="#">Typography</a></li>
<li><a href="#">FontAwesome</a></li>
<li><a href="#">Slider</a></li>
<li><a href="#">Panels</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Bootstrap Model</a></li>
</ul>
</ul>
</div>
</div>
so I have one dropdown menu for testing, if I click any one of them they will not open
2 answers
solution1
0 2018-03-05 10:06:59
may be this help you...
<head>
<title>Bootstrap 3 Collapsible Sidebar</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="wrapper">
<nav id="sidebar">
<!-- Sidebar Header -->
<div class="sidebar-header">
<h3>Collapsible Sidebar</div>
</div>
<!-- Sidebar Links -->
<ul class="list-unstyled components">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><!-- Link with dropdown items -->
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
</ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
solution2
0 2018-03-05 10:09:50
I figured out that my problem is not with the html tags
I should include jquery library before the bootstrap libraries.
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 nav dropdown menu is not working
Converting custom nav bar to dropdown menu on bootstrap
Bootstrap navbar dropdown menu/collapsed navbar not opening
bootstrap dropdown side menu works only once
Bootstrap - How to add text to Nav Bar Dropdown menu
Dropdown menu overflow not working when inside a bootstrap nav bar
Trouble with multi-level collapsible Bootstrap side-nav menu
bootstrap “mega-dropdown” centering main menu nav items
Magic Dropdown Nav Menu?
Toggling a Bootstrap nav dropdown
Related Tags