通过单击JS外部的任何地方来停用该开关以隐藏JS中的弹出菜单 [英] Deactivate a toggle to hide a popup menu in JS by clicking anywhere outside it

问题描述

我有3个菜单home，Clinic和About.如果单击Clinic，则将显示一个Megamenu；如果再次单击Clinic，则该Megamenu将被隐藏.

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.

当您单击网页上的任意位置时，我希望Megamenu隐藏. 问题在于，只有在单击Clinic菜单选项时，它才会被隐藏.

I want to Megamenu to hide when you click anywhere on the webpage. The problem is that it is only getting hidden when click on the Clinic menu option.

HTML

<div class="menu">
      <ul>
          @if($_SESSION['navbar_number'] == '1')
          <li class="menu_active" style="color:#fff;">
              
          @else
          <li>
              
          @endif
          
          <a class="nav-item nav-link" href="{{ url('/') }}">Home</a>
          </li>
          
          @if($_SESSION['navbar_number'] == '2')
          <li class="menu_active" style="color:#fff;">
              
          @else
          <li>
              
          @endif
          
            <a class="nav-item nav-link" href="#">Clinic </a>
            <ul>
    
                <li style="padding-top:15px;">
                    <a href="#" style="color:#8E499A;">
                          Laser Skin Clinic
                    </a>
    
                    <ul>
                        <li><a href="{{ url('/clinic_service/Laser Hair Removal-1') }}">Laser Hair Removal</a></li>
                        <li><a href="{{ url('/clinic_service/Acne & Acne Scar-2') }}">Acne & Acne Scar</a></li>
                    </ul>
                </li>
                
                <li style="padding-top:15px;">
                    <a href="#" style="color:#8E499A;">
                          Anti Aging Clinic
                    </a>
                    <ul>
                        <li><a href="{{ url('/clinic_service/Power Thread Lift with PRP-11') }}">Power Thread Lift with PRP</a></li>
                        <li><a href="{{ url('/clinic_service/Botox-12') }}">Botox</a></li>
                        <li><a href="{{ url('/clinic_service/Filler-13') }}">Filler</a></li>
                    </ul>
                    
                    <a href="#" style="color:#8E499A;">
                          Hair Regrowth Clinic
                    </a>
    
                    <ul>
                        <li><a href="{{ url('/clinic_service/Laser Hair Regrowth-18') }}">Laser Hair Regrowth</a></li>
                        <li><a href="{{ url('/clinic_service/PRP-32') }}">PRP</a></li>
                    </ul>
                    
                    <a href="#" style="color:#8E499A;">
                          Breast Enhancement Clinic
                    </a>
    
                    <ul>
                        <li><a href="{{ url('/clinic_service/Laser Breast Enhancement-21') }}">Laser Breast Enhancement</a></li>
                        <li><a href="{{ url('/clinic_service/Breast Lift by Radiofrequency-22') }}">Breast Lift by Radiofrequency</a></li>
                    </ul>
                </li>
            
            </ul>
          </li>
      </ul>
    </div>

JS

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

要停用切换开关并隐藏菜单，我尝试使用此功能:

To deactivate the toggle and hide the menu, I have tried to use this:

$(window).click(function(e)
{
   if ($(window).width() > 943) {
        $(".menu > ul > li > ul").hide();
    }    
});

但是当我使用它时，单击Clinic菜单选项不再起作用. 该如何解决?

But when I use this, clicking on the Clinic menu option doesn't work any more. How to solve that ?

推荐答案

问题是单击菜单会同时触发$(".menu > ul > li").click()和$(window).click().因此，即使将其打开，它也会再次隐藏在$(window).click()

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()

您可以更改$(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.

下面的代码检查clicked元素是否为.menu的子元素，如果为.menu，则不执行任何操作.如果没有点击.menu元素中的某个元素，那么它将隐藏菜单.

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 menu
        if (!$(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 menu
        if (!$(e.target).closest('.menu').length) {
            $(".menu > ul > li > ul").hide();
        }
    }
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li>
      <a class="nav-item nav-link" href="{{ url('/') }}">Home</a>
    </li>

    <li>
      <a class="nav-item nav-link" href="#">Clinic </a>
      <ul>

        <li style="padding-top:15px;">
          <a href="#" style="color:#8E499A;">
                          Laser Skin Clinic
                    </a>

          <ul>
            <li><a href="{{ url('/clinic_service/Laser Hair Removal-1') }}">Laser Hair Removal</a></li>
            <li><a href="{{ url('/clinic_service/Acne & Acne Scar-2') }}">Acne & Acne Scar</a></li>
          </ul>
        </li>

        <li style="padding-top:15px;">
          <a href="#" style="color:#8E499A;">
                          Anti Aging Clinic
                    </a>
          <ul>
            <li><a href="{{ url('/clinic_service/Power Thread Lift with PRP-11') }}">Power Thread Lift with PRP</a></li>
            <li><a href="{{ url('/clinic_service/Botox-12') }}">Botox</a></li>
            <li><a href="{{ url('/clinic_service/Filler-13') }}">Filler</a></li>
          </ul>

          <a href="#" style="color:#8E499A;">
                          Hair Regrowth Clinic
                    </a>

          <ul>
            <li><a href="{{ url('/clinic_service/Laser Hair Regrowth-18') }}">Laser Hair Regrowth</a></li>
            <li><a href="{{ url('/clinic_service/PRP-32') }}">PRP</a></li>
          </ul>

          <a href="#" style="color:#8E499A;">
                          Breast Enhancement Clinic
                    </a>

          <ul>
            <li><a href="{{ url('/clinic_service/Laser Breast Enhancement-21') }}">Laser Breast Enhancement</a></li>
            <li><a href="{{ url('/clinic_service/Breast Lift by Radiofrequency-22') }}">Breast Lift by Radiofrequency</a></li>
          </ul>
        </li>

      </ul>
    </li>
    <li>
      <a class="nav-item nav-link" href="#">Another test option</a>
    </li>
  </ul>
</div>

这篇关于通过单击JS外部的任何地方来停用该开关以隐藏JS中的弹出菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！