title: dropdown closing if click on tab
body: <p>when clicking on tabs inside the dropdown is closing, and then when clicking again on drop down tab is changed. using wordpress, porto theme. code is bellow. what is wrong?</p>
  <pre><code>&lt;div class=&quot;dropdown messages-menu&quot;&gt;
    
    &lt;a  href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
      &lt;span class=&quot;tmarketst&quot;&gt;&lt;i  class=&quot;porto-icon-user-2&quot; &gt;&lt;/i&gt;&lt;/span&gt;  My Profile
    &lt;/a&gt;
    &lt;div class=&quot;dropdown-menu&quot;&gt;
      &lt;ul class=&quot;nav nav-tabs&quot; id=&quot;myTab&quot;&gt;
        &lt;li class=&quot;active&quot;&gt;&lt;a data-target=&quot;#home&quot; data-toggle=&quot;tab&quot;&gt;Log in &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-target=&quot;#profile&quot; data-toggle=&quot;tab&quot;&gt;Register&lt;/a&gt;&lt;/li&gt;
        
      &lt;/ul&gt;
  
      &lt;div class=&quot;tab-content&quot;&gt;
        &lt;div class=&quot;tab-pane active&quot; id=&quot;home&quot;&gt;&lt;?php echo do_shortcode(&quot;[wc_login_form_mmy]&quot;); ?&gt; &lt;/div&gt;
        &lt;div class=&quot;tab-pane&quot; id=&quot;profile&quot;&gt;&lt;?php echo do_shortcode(&quot;[wc_reg_form_mmy]&quot;); ?&gt;&lt;/div&gt;
        
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <h1></h1>
  <pre><code> $( 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 &gt; ul &gt; li &gt; a').on('click', function(event){
    event.stopPropagation();
    $(this).tab('show')
   });
  });
  </code></pre>