jquery - 当用户点击页面某处时关闭所有子菜单
问题描述
我有以下简单的 jQuery 菜单,您也可以在此处的 JSfiddle 中找到它:
$(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
关闭所有submenus
.
我需要在我的代码中进行哪些更改才能使其正常工作?
解决方案
你去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
到您的事件侦听器选择器中,这样当您在面板内单击时,菜单不会关闭。
推荐阅读
- python - dask.bag / dask.delayed for loop有什么区别,为dask中的python并行作业选择更好的方法
- firebase - 检测到 0 个或 2 个或多个 [DropdownMenuItem] 具有相同的值
- html - 仅在 CSS 动画完成后显示 HTML 正文(使用纯 CSS)
- c# - 如何在c#中限制用户在特定时间段后取消预订
- postgresql - 在 PostgreSQL 触发器中循环和测试 cte 的结果
- html - 如何使用 BeautifulSoup 提取每个 df1 内容(优点、缺点、df_tit)?
- reactjs - MUI Datetimepicker 使用下拉选择更改值
- javascript - Google Sheets Appscript 弹出提示响应并隐藏工作表,直到响应正确
- javascript - 使用 if 语句反应组件未在 .map 内呈现
- rust - 如何修复使用 HashMap 的代码
> 对矩阵进行对角线排序?