How to Fix Problem Closing Dropdown When I Click Outside It

How to close dropdown menu when user clicks outside of it on mobile screen size

I was able to somewhat fix this by adding some custom classes to the div for the icon button and by writing this snippet of code which seemed to do the trick for me.

<script>
$(document).on("click", function (event) {
    var $BMI = $(".mobile-menu.hamburger-icon");
    var $VMM = $(".dl-menu.dl-menuopen");
    
    if ($BMI !== event.target && !$BMI.has(event.target).length && ($VMM.is(":hidden"))) {
                              
        $(".mobile-navigation.dl-menuwrapper.open-mobile-menu").addClass('open-mobile-menu');
        
        $(".dl-menu.dl-menuopen").addClass('dl-menuopen');           
    }        
    
 </script>

Close Dropdown when I click outside dropdown

This

$(document).click(function() {
    $(".open_filter").removeClass("open_filter");
});

Is a very bad solution. It triggesrs every time you click anywhere on the site. So also when you click the h3 tag to open the dropdown. That's why it is closed immediately.

Instead you should check what is clicked when you click the document.

$('.filter-section h3').on('click', function() {  $(this).toggleClass('arrow-down');  if (!$(this).parent().find('.lef-shop-section ul').hasClass('open_filter')) {    $('.open_filter').removeClass('open_filter');    $(this).parent().find('.lef-shop-section ul').addClass('open_filter');  } else {    $('.open_filter').removeClass('open_filter');  }});
$(document).on('click', function(e) {  var $target = $(e.target),    $ul = $target.closest('.filter-section').find('.lef-shop-section ul');
  if (typeof $ul === "undefined" || !$ul.hasClass('open_filter')) {    $(this).removeClass('arrow-down');    $('.open_filter').removeClass('open_filter');  }});

body {  width: 100vw;  height: 100vh;}
.filter-section .lef-shop-section ul {  display: none;}
.filter-section .lef-shop-section ul.open_filter {  display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="filter-section">  <h3>Click me to open dropdown, clcik anywhere else to close it</h3>  <div class="lef-shop-section">    <ul>      <li>Position 1</li>      <li>Position 2</li>      <li>Position 3</li>      <li>Position 4</li>      <li>Position 5</li>    </ul>  </div></div><div class="filter-section">  <h3>Click me to open dropdown, clcik anywhere else to close it</h3>  <div class="lef-shop-section">    <ul>      <li>Position 1</li>      <li>Position 2</li>      <li>Position 3</li>      <li>Position 4</li>      <li>Position 5</li>    </ul>  </div></div>

Dropdown menu is not closing when clicked outside the menu

You can use javascript to achieve that.

function hideDiv(){
    document.getElementsByClassName('custom-menu-cont')[0].classList.remove('hidden');
}

document.addEventListener("click", hideDiv, false);

You can also remove onclick from <div class="custom-menubutton"> and write in javascript as it is a better convention.

function hideDivStopPropagation(e) {
    document.getElementsByClassName('custom-menu-cont')[0].classList.toggle('hidden');
    e.stopPropagation();
}

document.getElementsByClassName('custom-menubutton')[0].addEventListener("click", hideDivStopPropagation, false);

The easier way is to use JQuery.

$(document).on('click', function() {
  $('.custom-menu-cont').toggleClass('hidden');
});

$('.custom-menubutton').on('click', function(e) {
  e.stopPropagation();
  $('.custom-menu-cont').toggleClass('hidden');
});

Note: I used e.stopPropagation() because, when you click on the div.custom-menubutton, It means I clicked on document too. So it runs hideDiv function and hides the menu always(Even if you click div to open dropdown). So e.stopPropagation() prevents your click propagating all the way to the document.

How to Fix Problem Closing Dropdown When I Click Outside It

How to close dropdown menu when user clicks outside of it on mobile screen size

Close Dropdown when I click outside dropdown

Dropdown menu is not closing when clicked outside the menu

Related Topics

Leave a reply