how to hide dropdown menu when click out in any place of the screen

198
June 22, 2018, at 12:10 PM

I have the below code for dropdown menu, this code I use to put items in dropdown list if menu bar width is not enough to display all items depend on the screen width. all working fine but I want when click out to hide the dropdown menu I tried .mouseup but didnt work I hope you can help me all working fine but I want when click out to hide the dropdown menu I tried .mouseup but didnt work the code is very big

   <script>
    var $nav = $('.greedy-nav');
    var $btn = $('.greedy-nav button');
     var $vlinks = $('.greedy-nav .visible-links');
    var $hlinks = $('.greedy-nav .hidden-links');
    var breaks = [];
    function updateNav() {
    var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - 
    $btn.width() - 30;
    if($vlinks.width() > availableSpace) {
    breaks.push($vlinks.width());
    $vlinks.children().last().prependTo($hlinks);
    if($btn.hasClass('hidden')) {
    $btn.removeClass('hidden');
 }
  } else {
  if(availableSpace > breaks[breaks.length-1]) {
  $hlinks.children().first().appendTo($vlinks);
  breaks.pop();
  }
 if(breaks.length < 1) {
  $btn.addClass('hidden');
  $hlinks.addClass('hidden');
 }
 }
 $btn.attr("count", breaks.length);
 if($vlinks.width() > availableSpace) {
 updateNav();
}
}
 $(window).resize(function() {
  updateNav();
  });
 $btn.on('click', function() {
 $hlinks.toggleClass("hidden");
  });
  updateNav();
 </script>

HTML

 <div id="shouldPin">
 <div class="ItemListForMenu_shouldPin" id="CategoriesList">
<div class="MenuCategoriesList_categoriesSection">
<nav class='greedy-nav'>
<button id="mybtn">More</button>
<ul id="mainNav" class='visible-links'>
<li><a href='' class="MainCategory">Appetizers</a></li>
<li><a href='' class="MainCategory">Soups</a></li>
<li><a href='' class="MainCategory">Salads</a></li>
<li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
 <li><a href='' class="MainCategory">Appetizers</a></li>
<li><a href='' class="MainCategory">Soups</a></li>
<li><a href='' class="MainCategory">Salads</a></li>
<li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
<li><a href='' class="MainCategory">Appetizers</a></li>
<li><a href='' class="MainCategory">Soups</a></li>
<li><a href='' class="MainCategory">Salads</a></li>
<li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
<li><a href='' class="MainCategory">Appetizers</a></li>
<li><a href='' class="MainCategory">Soups</a></li>
<li><a href='' class="MainCategory">Salads</a></li>
<li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
 </ul>
    <ul id="menu_dropdown" class='hidden-links hidden'></ul>
   </nav>
        </div>
     </div>
    </div>
Answer 1

You can use $.contains() to determine if an element is inside of another element. You need to create a click handler on the entire document and check if the click target is inside the dropdown or not:

$(document).on('click', function(e) {
    const dropdown = $('.dropdown');
    if(!$.contains(dropdown, e.target) {
        // Close dropdown
        $(dropdown).toggleClass('hidden');
    }
});

And to keep your app performant, you only want to add the click event to the document when the dropdown is open and remove the click event from document when the dropdown is closed.

EDIT: Here is a working snippet demonstrating my suggestion. You first check if the dropdown is already hidden and then check to see if the user clicked a link in the dropdown. If neither of those are true, then it will hide the second dropdown. Clicking outside of the menu will close the second dropdown:

var $nav = $('.greedy-nav'); 
var $btn = $('.greedy-nav button'); 
var $vlinks = $('.greedy-nav .visible-links'); 
var $hlinks = $('.greedy-nav .hidden-links'); 
var breaks = []; 
 
function updateNav() { 
  var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - 
    $btn.width() - 30; 
  if ($vlinks.width() > availableSpace) { 
    breaks.push($vlinks.width()); 
    $vlinks.children().last().prependTo($hlinks); 
    if ($btn.hasClass('hidden')) { 
      $btn.removeClass('hidden'); 
    } 
  } else { 
    if (availableSpace > breaks[breaks.length - 1]) { 
      $hlinks.children().first().appendTo($vlinks); 
      breaks.pop(); 
    } 
    if (breaks.length < 1) { 
      $btn.addClass('hidden'); 
      $hlinks.addClass('hidden'); 
    } 
  } 
  $btn.attr("count", breaks.length); 
  if ($vlinks.width() > availableSpace) { 
    //updateNav(); 
  } 
} 
$(window).resize(function() { 
  //updateNav(); 
}); 
 
$btn.on('click', function(e) { 
  e.stopPropagation(); 
  $hlinks.toggleClass("hidden"); 
}); 
 
updateNav(); 
 
$(document).on('click', function(e) { 
  // Check if the dropdown is already hidden 
  // Check if the clicked target exists in the hidden dropdown 
  // Check if the clicked target exists in the visible dropdown 
  // If none are true, then hide the dropdown 
  if (!$($hlinks).hasClass('hidden') && 
    !$.contains($hlinks[0], e.target) && 
    !$.contains($vlinks[0], e.target)) { 
    $($hlinks).addClass('hidden'); 
  } 
});
.hidden { 
  display: none; 
} 
 
.visible-links { 
  background: #ededed; 
} 
 
.hidden-links { 
  background: #222; 
} 
 
.hidden-links a { 
  color: #FFF; 
} 
 
#shouldPin { 
  padding-bottom: 300px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="shouldPin"> 
  <div class="ItemListForMenu_shouldPin" id="CategoriesList"> 
    <div class="MenuCategoriesList_categoriesSection"> 
      <nav class='greedy-nav'> 
        <button id="mybtn">More</button> 
        <ul id="mainNav" class='visible-links'> 
          <li>Appetizers</li> 
          <li><a href='' class="MainCategory">Soups</a></li> 
          <li><a href='' class="MainCategory">Salads</a></li> 
          <li><a href='' class="MainCategory">Sashimi or Sushi</a></li> 
          <li><a href='' class="MainCategory">Appetizers</a></li> 
          <li><a href='' class="MainCategory">Soups</a></li> 
          <li><a href='' class="MainCategory">Salads</a></li> 
          <li><a href='' class="MainCategory">Sashimi or Sushi</a></li> 
          <li><a href='' class="MainCategory">Appetizers</a></li> 
          <li><a href='' class="MainCategory">Soups</a></li> 
          <li><a href='' class="MainCategory">Salads</a></li> 
          <li><a href='' class="MainCategory">Sashimi or Sushi</a></li> 
          <li><a href='' class="MainCategory">Appetizers</a></li> 
          <li><a href='' class="MainCategory">Soups</a></li> 
          <li><a href='' class="MainCategory">Salads</a></li> 
          <li><a href='' class="MainCategory">Sashimi or Sushi</a></li> 
        </ul> 
        <ul id="menu_dropdown" class='hidden-links hidden'></ul> 
      </nav> 
    </div> 
  </div> 
</div>

Rent Charter Buses Company
READ ALSO
how to play mov files on chrome?

how to play mov files on chrome?

I am working on a website that supports uploading and playing videosThe problem is that

214
mod rewrite subdomain, domain and extension

mod rewrite subdomain, domain and extension

I wish to (viahtaccess or vhost) do a modrewrite of a new tld to retrieve products from out store

125
bold text within **text** marks php [duplicate]

bold text within **text** marks php [duplicate]

This question already has an answer here:

140