title: bootstrap tabs inside a dropdown closing when clicked
body: <p>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 <strong>javascript</strong> to open the dropdown and use the </p>
  
  <blockquote>
    <p><code>e.stopPropagation();</code>
    the tabs <strong>#href</strong> are working and it's not closing but the content is not changing. </p>
  </blockquote>
  
  <p>here's my code.</p>
  
  <pre><code>&lt;nav class="navbar navbar-default"&gt;
      &lt;ul class="nav nav-pills"&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link active" href="#"&gt;Active&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="nav-item dropdown"&gt;
              &lt;a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"&gt;Dropdown&lt;/a&gt;
              &lt;div class="dropdown-menu"&gt;
                  &lt;ul class="nav nav-tabs animation" role="tablist" &gt;                          
                      &lt;li class="active"&gt;&lt;a href="#cars" role="tab" data-toggle="tab"&gt;Cars&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#vans" role="tab" data-toggle="tab"&gt;Vans &amp; Pickup&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#suv" role="tab" data-toggle="tab"&gt;SUVs &amp; Crossover&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#mpv" role="tab" data-toggle="tab"&gt;MPVs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#hybrid" role="tab" data-toggle="tab"&gt;Hybrid&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#performance" role="tab" data-toggle="tab"&gt;Performance&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;!-- Tab panes --&gt;
                  &lt;div class="tab-content white-bg-tabs"&gt;
                      &lt;div class="tab-pane active" id="cars" role="tabpanel"&gt;
                          00. SOME ITEM w IMAGE / LIST HERE 
                      &lt;/div&gt;
  
                      &lt;div class="tab-pane" id="vans" role="tabpanel"&gt;
                          0. SOME ITEM w IMAGE / LIST HERE         
                      &lt;/div&gt;
  
                      &lt;div class="tab-pane" id="suv" role="tabpanel"&gt;
                           1. SOME ITEM w IMAGE / LIST HERE   
                      &lt;/div&gt;
  
                      &lt;div class="tab-pane" id="suv" role="tabpanel"&gt;
                         2. SOME ITEM w IMAGE / LIST HERE     
                      &lt;/div&gt;
  
                      &lt;div class="tab-pane" id="mpv" role="tabpanel"&gt;
                           3. SOME ITEM w IMAGE / LIST HERE 
                      &lt;/div&gt;
  
                      &lt;div class="tab-pane" id="hybrid" role="tabpanel"&gt;
                           4. SOME ITEM w IMAGE / LIST HERE 
                      &lt;/div&gt;
  
                      &lt;div class="tab-pane" id="performance" role="tabpanel"&gt;
                         5. SOME ITEM w IMAGE / LIST HERE 
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- container --&gt;  
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here's the javascript. and btw i use bootstrap 4 alpha 6 here.</p>
  
  <pre><code>$('.dropdown-menu').on('click.bs.dropdown', function (e) {
       e.stopPropagation(); 
     e.preventDefault();
  }
  </code></pre>