Hey, I've got a dropdown with tabs inside. When I click on certain tabs within it, they close but the content inside the tabs that I click on changes, so it's functioning properly. However, the issue is that it closes when I want it to stay open so that users can click on each tab without it closing. I am using JavaScript to handle opening the dropdown and utilizing
e.stopPropagation();The tabs with #href are working and not closing, but the content is not changing.
Here's the code:
<nav class="navbar navbar-default">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<ul class="nav nav-tabs animation" role="tablist" >
<li class="active"><a href="#cars" role="tab" data-toggle="tab">Cars</a></li>
<li><a href="#vans" role="tab" data-toggle="tab">Vans & Pickup</a></li>
<li><a href="#suv" role="tab" data-toggle="tab">SUVs & Crossover</a></li>
<li><a href="#mpv" role="tab" data-toggle="tab">MPVs</a></li>
<li><a href="#hybrid" role="tab" data-toggle="tab">Hybrid</a></li>
<li><a href="#performance" role="tab" data-toggle="tab">Performance</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content white-bg-tabs">
<div class="tab-pane active" id="cars" role="tabpanel">
00. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="vans" role="tabpanel">
0. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="suv" role="tabpanel">
1. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="suv" role="tabpanel">
2. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="mpv" role="tabpanel">
3. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="hybrid" role="tabpanel">
4. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="performance" role="tabpanel">
5. SOME ITEM w IMAGE / LIST HERE
</div>
</div>
<!-- container -->
</div>
</li>
</ul>
</nav>
And here's the JavaScript code. By the way, Bootstrap 4 alpha 6 is being used in this implementation.
$('.dropdown-menu').on('click.bs.dropdown', function (e) {
e.stopPropagation();
e.preventDefault();
}