我有以下简单的 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
关闭/打开 子菜单
。
所有这一切都很好。
现在,我希望当用户点击页面上的任何地方时,子菜单
自动关闭,因为现在用户总是必须点击.main_menu_01菜单
关闭所有子菜单
。
我需要在我的代码中更改什么才能使其正常工作?
最佳答案
给你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
添加到您的事件监听器选择器中,这样当您在面板内单击时,菜单不会关闭。
关于jquery - 当用户点击页面某处时关闭所有子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53442903/