title: Jquery - Conditional dropdown does not stay open
body: <p>I'm trying to build a dropdown menu.</p>
  
  <ol>
  <li>Opens when clicked on.</li>
  <li>Stays open when submenu item is clicked on.</li>
  <li><p>Closes when I click anywhere else on the screen.</p></li>
  <li><p>Is OK.</p></li>
  <li>Not OK.</li>
  <li>Is OK.</li>
  </ol>
  
  <p>I can't find the fault in the logic I used, any help is appreciated!</p>
  
  <p>Thanks!</p>
  
  <p>$</p>
  
  <pre><code>    // Dropdown menu icon animation up/down toggle.
  
  $('.dropbtn').on('click', function() {
    $('#myDropdown').slideToggle();
    $(this).find('i').toggleClass('fa-sort-up fa-sort-down')
  });
  
  
  // Dropdown menu up/down toggle.
  
  
  $(document).mouseup(function(e) {
    var container = $(".dropdownmenu");
          if (!container.is(e.target) 
        &amp;&amp; container.has(e.target).length === 0
  
  
         ) 
  
    {
      $("#myDropdown").slideUp();
      $('.dropbtn i').addClass('fa-sort-up').removeClass('fa-sort-down')
    }
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="dropdown"&gt;
                    &lt;div class="dropdownmenu"&gt;
                      &lt;button class="dropbtn main"&gt;Diet or Allergen Filter &lt;i class="fa fa-sort-up" style="font-size:24px; line-height:0px; margin-left: 5px;"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;
                      &lt;div id="myDropdown" class="dropdown-content"&gt;
                          &lt;a id="veganDiet" class="dropbtn"&gt;&lt;img src="http://www.padthai.decorolux.com/wp-content/uploads/2017/11/vegan2-1.png"  style="width:40px; display:inline; height:20px; vertical-align:middle;"&gt; Vegan&lt;/a&gt;
                          &lt;a id="vegetarianDietButton" class="dropbtn"&gt;&lt;img src="http://www.padthai.decorolux.com/wp-content/uploads/2017/11/vegetarian-1.png" style="width:40px; height:20px; display:inline; vertical-align:middle;"&gt; Vegetarian&lt;/a&gt;
                          &lt;a id="noAddesSugarButton" class="dropbtn"&gt;&lt;img src="http://www.padthai.decorolux.com/wp-content/uploads/2017/11/sugarfree-1.png" style="width:40px; height:20px; display:inline; vertical-align:middle;"&gt; No Added Sugar&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Also, here's the live codepen:</p>
  
  <p><a href="https://codepen.io/Pbalazs89/full/ZxQbqY" rel="nofollow noreferrer">https://codepen.io/Pbalazs89/full/ZxQbqY</a></p>