Click outside to toggle dropdown and hide it

Question

Click outside to toggle dropdown and hide it

My dropdown menu is currently working, but I would like it to close when I click outside of it. I've tried various solutions provided in other posts, but I just can't seem to get it right. Can someone please help me figure out what I am missing? Thank you!

$("#toggle").on('click', function() {
   $(".dropdown").toggleClass("dropdown--visible");
});

$(document).click(function(){
    $(".dropdown").hide();
});

$(".dropdown").click(function(e){
    e.stopPropagation();
});

.dropdown {
  background: red;
  display: none;
}

.dropdown--visible {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="toggle">Toggle dropdown</button>

<div class="dropdown">
    <ul>
      <li>one</li>
      <li>two</li>
  </ul>
</div>

javascript jquery css

Answer 1

Answer №1

$("#toggle").on('blur click', function() {
   $(".dropdown").toggleClass("dropdown--visible");
});

$(document).click(function(){
    
});

.dropdown {
  background: red;
  display: none;
}

.dropdown--visible {
  display: block!important;
}
.dropdown--invisible {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="toggle">Toggle dropdown</button>

<div class="dropdown">
    <ul>
      <li>one</li>
      <li>two</li>
  </ul>
</div>

Answer 2

$("#toggle").on('blur click', function() {
   $(".dropdown").toggleClass("dropdown--visible");
});

$(document).click(function(){
    
});

.dropdown {
  background: red;
  display: none;
}

.dropdown--visible {
  display: block!important;
}
.dropdown--invisible {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="toggle">Toggle dropdown</button>

<div class="dropdown">
    <ul>
      <li>one</li>
      <li>two</li>
  </ul>
</div>

Answer 3

Answer №2

By setting up a click event listener for the entire document, it will respond every time you click anywhere on the page. To target specific elements like dropdowns, you can use a common class to filter out those events.

<button id="toggle" class="dd">Toggle dropdown</button>

<div class="dropdown dd">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
</div>

$(document).click(function(e){
  if (!$(e.target).hasClass('dd')) {        
    $(".dropdown").removeClass("dropdown--visible");
  }
});

It is recommended to use removeClass() instead of hide(), as hide() directly applies a display:none; style which may be difficult to manage.

Answer 4

By setting up a click event listener for the entire document, it will respond every time you click anywhere on the page. To target specific elements like dropdowns, you can use a common class to filter out those events.

<button id="toggle" class="dd">Toggle dropdown</button>

<div class="dropdown dd">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
</div>

$(document).click(function(e){
  if (!$(e.target).hasClass('dd')) {        
    $(".dropdown").removeClass("dropdown--visible");
  }
});

It is recommended to use removeClass() instead of hide(), as hide() directly applies a display:none; style which may be difficult to manage.

Answer 5

Answer №3

This solution features a vanilla-flavored approach using a handleDropdown function that evaluates two specific conditions:
- First, it checks if the toggle button was clicked.
- Secondly, it verifies if the dropdown is currently hidden.

If both conditions are met, the dropdown will be displayed. Otherwise, it will be hidden.

const dropdown = document.getElementsByClassName("dropdown")[0],
      toggle = document.getElementById("toggle");
document.addEventListener("click", handleDropdown);

function handleDropdown(event){
  if(event.target == toggle && dropdown.style.display != "block"){
    dropdown.style.display = "block";
  }
  else{
    dropdown.style.display = "none";
  }
}

.dropdown {
  background: red;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle">Toggle dropdown</button>
<div class="dropdown">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
</div>

Answer 6

This solution features a vanilla-flavored approach using a handleDropdown function that evaluates two specific conditions:
- First, it checks if the toggle button was clicked.
- Secondly, it verifies if the dropdown is currently hidden.

If both conditions are met, the dropdown will be displayed. Otherwise, it will be hidden.

const dropdown = document.getElementsByClassName("dropdown")[0],
      toggle = document.getElementById("toggle");
document.addEventListener("click", handleDropdown);

function handleDropdown(event){
  if(event.target == toggle && dropdown.style.display != "block"){
    dropdown.style.display = "block";
  }
  else{
    dropdown.style.display = "none";
  }
}

.dropdown {
  background: red;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle">Toggle dropdown</button>
<div class="dropdown">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
</div>

Click outside to toggle dropdown and hide it

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting: Image Not Displaying in Twitter Bootstrap Theme

Tips for fixing the issue: Absence of the environment variable 'TWITTER_CONSUMER_KEY'

Using AJAX to dynamically serialize data from a form and POST it in PHP

JavaScript inheritance through prototypes and the properties of objects

A problem arises when the React effect hook fails to trigger while utilizing React Context

Error message: The module '@project-serum/anchor' does not export the object 'AnchorProvider' as intended

What could be the reason for the undefined return from .forEach method?

spark of unique substance

Result of a callback function

Use jQuery to redirect the user if the URL does not match

Run the JavaScript configuration (Object) prior to converting it to JSON format

Aurelia-powered DataTable plugin for effortless data updating

creating a picture within a frame

Exploring timezones using moment.js

“What could be causing the issue of newly added components not appearing on an extjs panel after removing other components?”

What is the best way to format a time in a 12-hour clock using JavaScript?

Implementing a toggle function in Vue.js to add or remove a class from the body element when a

MySQL database not reflecting changes made via ajax code

The element fails to receive the class when it is being clicked

Learn the process of dynamically wrapping component content with HTML tags in Vue.js