Deactivate A Toggle To Hide A Popup Menu In Js By Clicking Anywhere Outside It

I have 3 menus home,Clinic and About. If I click on Clinic then a Megamenu is showing up and if I again click on Clinic then the Megamenu is hidden. I want to Megamenu to hide when

Solution 1:

The problem is that a click on the menu will trigger both $(".menu > ul > li").click() and $(window).click(). So even if it gets toggled on, its getting hidden again in $(window).click()

You can change the $(window).click function to first check if the click was outside the menu, and only do something if it was.

The code below checks the clicked element to see if it is a child of .menu, and if it is it does nothing. If the click wasn't on an element in the .menu element, then it will hide the menu.

$(window).click(function(e) {
    if ($(window).width() > 94) {
        // Check if .menu is an ancestor of the clicked element// If it is, then ignore the click because it's not outside the menuif (!$(e.target).closest('.menu').length) {
            $(".menu > ul > li > ul").hide();
        }
    }
});

Run this working snippet I made from your code to see it in action! (Note I've change your media query and the width of the menu so that you can see it working in the smaller snippet window).

$(".menu > ul > li").click(function(e) {
    if ($(window).width() > 94) {
        $(this).children("ul").fadeToggle(150);
  }
});

$(window).click(function(e) {
    if ($(window).width() > 94) {
        // Check if .menu is an ancestor of the clicked element// If it is, then ignore the click because it's not outside the menuif (!$(e.target).closest('.menu').length) {
            $(".menu > ul > li > ul").hide();
        }
    }
});

.menu {
  width: 300px;
  background: #eee;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><divclass="menu"><ul><li><aclass="nav-item nav-link"href="{{ url('/') }}">Home</a></li><li><aclass="nav-item nav-link"href="#">Clinic </a><ul><listyle="padding-top:15px;"><ahref="#"style="color:#8E499A;">
                          Laser Skin Clinic
                    </a><ul><li><ahref="{{ url('/clinic_service/Laser Hair Removal-1') }}">Laser Hair Removal</a></li><li><ahref="{{ url('/clinic_service/Acne & Acne Scar-2') }}">Acne & Acne Scar</a></li></ul></li><listyle="padding-top:15px;"><ahref="#"style="color:#8E499A;">
                          Anti Aging Clinic
                    </a><ul><li><ahref="{{ url('/clinic_service/Power Thread Lift with PRP-11') }}">Power Thread Lift with PRP</a></li><li><ahref="{{ url('/clinic_service/Botox-12') }}">Botox</a></li><li><ahref="{{ url('/clinic_service/Filler-13') }}">Filler</a></li></ul><ahref="#"style="color:#8E499A;">
                          Hair Regrowth Clinic
                    </a><ul><li><ahref="{{ url('/clinic_service/Laser Hair Regrowth-18') }}">Laser Hair Regrowth</a></li><li><ahref="{{ url('/clinic_service/PRP-32') }}">PRP</a></li></ul><ahref="#"style="color:#8E499A;">
                          Breast Enhancement Clinic
                    </a><ul><li><ahref="{{ url('/clinic_service/Laser Breast Enhancement-21') }}">Laser Breast Enhancement</a></li><li><ahref="{{ url('/clinic_service/Breast Lift by Radiofrequency-22') }}">Breast Lift by Radiofrequency</a></li></ul></li></ul></li><li><aclass="nav-item nav-link"href="#">Another test option</a></li></ul></div>