title: Toggle dropdown menu on li but prevent toggle clicking on ul
body: <p>On mobile im using javascript to toggle the dropdown.
  When clicking on a list item the dropdown should get visible and on a second click toggle back.</p>
  
  <p>The problem: if i like to use a search bar inside my dropdown menu the dropdown get toggled back to unvisible clicking inside search bar.</p>
  
  <p>Jquery:</p>
  
  <pre><code>$('.has-dropdown-two').on('click', function() {
  
              $(this).toggleClass('is-active').children('ul').toggleClass('is-visible');  
  
    });
  </code></pre>
  
  <p>First of all i tryed to make an if clause like:</p>
  
  <pre><code>if ($(this).hasClass('nav-dropdown-two') ) ..
  </code></pre>
  
  <p>Not working... then i checked console.log(this) and it looks like clicking on ul it has the same output like when clicking on li.</p>
  
  <p><b>I made a very simple preview:</b></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.has-dropdown-two').on('click', function() {
      var $this = $(this);
  
     
        $(this).toggleClass('is-active').children('ul').toggleClass('is-visible'); 
   
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.has-dropdown-two &gt; .menu-link { display: inline-block; }
  
  .has-dropdown-two.is-active &gt; .nav-dropdown-two {
      display: block;
  }
  
  .nav-dropdown-two {
    display: none;
        position: absolute;
  
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
   &lt;li class="menu-item has-dropdown-two"&gt; &lt;a href="javascript:void(0);"  class="menu-link stopnewline"&gt;Search&lt;/a&gt;
            &lt;ul class="nav-dropdown-two menu"&gt;
                  &lt;div class="search-container"&gt;
                      &lt;form action=""&gt;
                        &lt;input type="text"  name="search"&gt;
                        &lt;button type="submit"&gt;search&lt;/button&gt;
                      &lt;/form&gt;
                    &lt;/div&gt;                
         &lt;/ul&gt;
          &lt;/li&gt;
   </code></pre>
  </div>
  </div>
  </p>
  
  <p><b>Edit according lumio's solution:</b></p>
  
  <pre><code> $('.has-dropdown-two').on('click', function(event) {
      if ( event.target.tagName === 'A' || event.target.tagName === 'I' ) {
              $(this).toggleClass('is-active').children('ul').toggleClass('is-visible');
    }else{
      return;  
    }
    });
  </code></pre>