bootstrap tabs inside a dropdown closing when clicked

Question

Hello i have a Dropdown with tabs inside whenever i'm clicking certain tabs inside it. it closes but the content inside the tabs that i clicked is changing so it works. but the problem is it closes. i have to make it stay so the user will be able to click each tabs without closing and i use javascript to open the dropdown and use the

e.stopPropagation(); the tabs #href are working and it's not closing but the content is not changing.

here's my 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>

Here's the javascript. and btw i use bootstrap 4 alpha 6 here.

$('.dropdown-menu').on('click.bs.dropdown', function (e) {
     e.stopPropagation(); 
   e.preventDefault();
}

Answer 1

i found the solution here Bootstrap jQuery Tabs are not working in Dropdown

$( document ).ready(function() {
$('.dropdown-menu li').on('click', function(event){
//The event won't be propagated to the document NODE and 
// therefore events delegated to document won't be fired
   event.stopPropagation();
 });

 $('.dropdown-menu li').on('click', function(event){
   //The event won't be propagated to the document NODE and 
   // therefore events delegated to document won't be fired
   event.stopPropagation();
 });

 $('.dropdown-menu > ul > li > a').on('click', function(event){
  event.stopPropagation();
  $(this).tab('show')
 });
});

by user Deep