Question

我有以下简单的jQuery菜单，也可以在JSfiddle here中找到：

$(document).ready(function () {
    $(".main_menu_01, .main_menu_02").on('click', function () {
      var $panel = $(this).next('.panel');
      if ($panel.is(':visible')) {
        $panel.add($panel.find('.panel')).slideUp(500);
        $(this).hasClass('main_menu_01') ? $('.menu').removeClass('active') : $(this).removeClass('active');
      } else {
        $panel.slideDown(500);
        $(this).addClass('active');
      }
    });
});

.panel{ 
 width: 100%;
 padding-left: 0%;
 font-weight: bold;
 overflow: hidden;
 display:none;
}

.main_menu_01 {
 padding-left: 1%;
 background: blue;
}

.main_menu_02 {
 padding-left: 5%;
 background: lime;
}

.sub_menu_01{
 padding-left: 1%;
 background: lime;
}

.sub_menu_02{
 padding-left: 10%;
 background: lime;
}

 .main_menu_01:before, .main_menu_02:before {
 content:'+';
 width:20px;
 display:inline-block;
}

.main_menu_01.active:before, .main_menu_02.active:before {
 content:'-';
}

.content {
  margin-top: 5%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="main_menu_01 menu"> 1.0 Main Menu </li>
  <ul class="panel">
								
    <li class="sub_menu_01"> 1.1 Sub Menu </li>
					
    <li class="main_menu_02 menu"> 1.2 Sub Menu </li>
      <ul class="panel">
        <li class="sub_menu_02"> <a> 1.2.1 Sub Menu </a> </li>
        <li class="sub_menu_02"> <a> 1.2.2 Sub Menu </a> </li>	
      </ul>	
  </ul>
  
<div class="content">
<p>Content goes here</p>
</div>

正如您在代码中看到的那样，我使用slideUp和slideDown关闭/打开submenus。
所有这些都很好。

现在，我希望当用户单击页面submenus上的任意位置时自动关闭，因为现在用户总是必须单击.main_menu_01 menu才能关闭所有{ {1}}。

要使此功能生效，我需要更改什么代码？

Answer 1

您在这里https://jsfiddle.net/ogbn8x6v/9/

只需添加e.stopPropagation()，然后将事件监听器添加到正文中即可：）

$(document).ready(function () {
    $(".main_menu_01, .main_menu_02, .panel").on('click', function (e) {
    	e.stopPropagation();
      var $panel = $(this).next('.panel');
      if ($panel.is(':visible')) {
        $panel.add($panel.find('.panel')).slideUp(500);
        $(this).hasClass('main_menu_01') ? $('.menu').removeClass('active') : $(this).removeClass('active');
      } else {
        $panel.slideDown(500);
        $(this).addClass('active');
      }
    });
    
    $("body").on('click', function () {
      var $panel = $('.panel');
      if ($panel.is(':visible')) {
        $panel.add($panel.find('.panel')).slideUp(500);
        $('main_menu_01').removeClass('active');
        $('.menu').removeClass('active');
      }
    });
});

.panel{ 
 width: 100%;
 padding-left: 0%;
 font-weight: bold;
 overflow: hidden;
 display:none;
}

.main_menu_01 {
 padding-left: 1%;
 background: blue;
}

.main_menu_02 {
 padding-left: 5%;
 background: lime;
}

.sub_menu_01{
 padding-left: 1%;
 background: lime;
}

.sub_menu_02{
 padding-left: 10%;
 background: lime;
}

 .main_menu_01:before, .main_menu_02:before {
 content:'+';
 width:20px;
 display:inline-block;
}

.main_menu_01.active:before, .main_menu_02.active:before {
 content:'-';
}

.content {
  margin-top: 5%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="main_menu_01 menu"> 1.0 Main Menu </li>
  <ul class="panel">
								
    <li class="sub_menu_01"> 1.1 Sub Menu </li>
					
    <li class="main_menu_02 menu"> 1.2 Sub Menu </li>
      <ul class="panel">
        <li class="sub_menu_02"> <a> 1.2.1 Sub Menu </a> </li>
        <li class="sub_menu_02"> <a> 1.2.2 Sub Menu </a> </li>	
      </ul>	
  </ul>
  
<div class="content">
<p>Content goes here</p>
</div>

注意：我还向事件监听器选择器中添加了.panel，因此，当您在面板内单击时，菜单不会关闭。

Answer 2

使用菜单的环绕div，选中DOM，然后使用下面的 jquery

关闭菜单

$(document).ready(function () {
    $(".main_menu_01, .main_menu_02").on('click', function () {
      var $panel = $(this).next('.panel');
      if ($panel.is(':visible')) {
        $panel.add($panel.find('.panel')).slideUp(500);
        $(this).hasClass('main_menu_01') ? $('.menu').removeClass('active') : $(this).removeClass('active');
      } else {
        $panel.slideDown(500);
        $(this).addClass('active');
      }
    });

	$('html').click(function(event) {
    if($(event.target).closest(".new").length === 0){
			$('.panel').slideUp(500);
      $('.menu').removeClass('active')
    }
  });
});

.panel{ 
 width: 100%;
 padding-left: 0%;
 font-weight: bold;
 overflow: hidden;
 display:none;
}

.main_menu_01 {
 padding-left: 1%;
 background: blue;
}

.main_menu_02 {
 padding-left: 5%;
 background: lime;
}

.sub_menu_01{
 padding-left: 1%;
 background: lime;
}

.sub_menu_02{
 padding-left: 10%;
 background: lime;
}

 .main_menu_01:before, .main_menu_02:before {
 content:'+';
 width:20px;
 display:inline-block;
}

.main_menu_01.active:before, .main_menu_02.active:before {
 content:'-';
}

.content {
  margin-top: 5%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="new">
<div class="main_menu_01 menu"> 1.0 Main Menu </div>
  <ul class="panel">
								
    <li class="sub_menu_01"> 1.1 Sub Menu </li>
					
    <li class="main_menu_02 menu"> 1.2 Sub Menu </li>
      <ul class="panel">
        <li class="sub_menu_02"> <a> 1.2.1 Sub Menu </a> </li>
        <li class="sub_menu_02"> <a> 1.2.2 Sub Menu </a> </li>	
      </ul>	
  </ul>
  
</div>

<div class="content">
<p>Content goes here</p>
</div>

当用户单击页面上的某个位置时，关闭所有子菜单

2 个答案: