单击容器外部时隐藏展开的菜单:如何使用代码片段
Hide an expanded menu when clicking outside of the container: how to use code snipet
我有一个菜单,可以在单击时打开子菜单部分(让我们将容器命名为:“子菜单”)。
如果用户点击它之外/页面其余部分,我希望“子菜单”消失。
好像在How do I detect a click outside an element?上解决了
但是我无法从第二个最受欢迎的答案中了解如何使用代码片段:
export function hideOnClickOutside(selector) {
const outsideClickListener = (event) => {
const $target = $(event.target);
if (!$target.closest(selector).length && $(selector).is(':visible')) {
$(selector).hide();
removeClickListener();
}
}
const removeClickListener = () => {
document.removeEventListener('click', outsideClickListener)
}
document.addEventListener('click', outsideClickListener)
}
能否请您指导我如何使用它?
我编辑了一个基本示例。 -> 我希望子菜单在单击“白色”时也关闭 space。但不在父“主菜单”元素上。
document.getElementById("main-menu").addEventListener("click", function() {bouttonexpand('sub-menu-class')});
function bouttonexpand(id) {
var elemeacacher = document.getElementsByClassName(id);
if (elemeacacher[0].style.display != "none"){
for(var y=0;y<elemeacacher.length;y++)
elemeacacher[y].style.display = "none";
}
else {
for(var y=0;y<elemeacacher.length;y++)
elemeacacher[y].style.display = "block";
}
}
#main-menu {
display:inline-block;
height:20px;
width:100px;
background: blue;
padding: 5%;
}
#sub-menu {
display:inline-block;
height:50px;
width:50px;
background: red;
display: none;
}
<div><div id="main-menu">Main menu</div></div>
<div><div id="sub-menu" class="sub-menu-class">Sub menu</div></div>
谢谢
通过使用 jQuery,您可以绑定到文档单击事件并在单击的元素不是容器本身或 div 元素的后代时隐藏 div 容器.
var container = $("#sub-menu");
if (!container.is(event.target) && !container.has(event.target).length) {
container.hide();
}
如果您想在不测试容器本身或 div 元素的后代的情况下隐藏该容器,只需删除条件并简单地使用 container.hide();
.
另外,不要在 CSS 中的 sub-menu
上设置 display: none;
,而是手动设置它,以便您可以从第一次点击时切换 sub-menu
。
看看下面的片段:
var x = document.getElementById("sub-menu");
x.style.display = "none";
$(document).click(function (evt) {
if ($(evt.target).is('#main-menu')) { // control click event if it's main-menu
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
else {
var container = $("#sub-menu");
if (!container.is(event.target) && !container.has(event.target).length) { // if you don't want that remove the condition and write container.hide(); only
container.hide();
}
}
});
#main-menu {
display: inline-block;
height: 20px;
width: 100px;
background: blue;
padding: 5%;
}
#sub-menu {
display: inline-block;
height: 50px;
width: 50px;
background: red;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div id="main-menu">Main menu</div>
<div id="sub-menu" class="sub-menu-class">Sub menu</div>
我有一个菜单,可以在单击时打开子菜单部分(让我们将容器命名为:“子菜单”)。 如果用户点击它之外/页面其余部分,我希望“子菜单”消失。
好像在How do I detect a click outside an element?上解决了 但是我无法从第二个最受欢迎的答案中了解如何使用代码片段:
export function hideOnClickOutside(selector) {
const outsideClickListener = (event) => {
const $target = $(event.target);
if (!$target.closest(selector).length && $(selector).is(':visible')) {
$(selector).hide();
removeClickListener();
}
}
const removeClickListener = () => {
document.removeEventListener('click', outsideClickListener)
}
document.addEventListener('click', outsideClickListener)
}
能否请您指导我如何使用它?
我编辑了一个基本示例。 -> 我希望子菜单在单击“白色”时也关闭 space。但不在父“主菜单”元素上。
document.getElementById("main-menu").addEventListener("click", function() {bouttonexpand('sub-menu-class')});
function bouttonexpand(id) {
var elemeacacher = document.getElementsByClassName(id);
if (elemeacacher[0].style.display != "none"){
for(var y=0;y<elemeacacher.length;y++)
elemeacacher[y].style.display = "none";
}
else {
for(var y=0;y<elemeacacher.length;y++)
elemeacacher[y].style.display = "block";
}
}
#main-menu {
display:inline-block;
height:20px;
width:100px;
background: blue;
padding: 5%;
}
#sub-menu {
display:inline-block;
height:50px;
width:50px;
background: red;
display: none;
}
<div><div id="main-menu">Main menu</div></div>
<div><div id="sub-menu" class="sub-menu-class">Sub menu</div></div>
谢谢
通过使用 jQuery,您可以绑定到文档单击事件并在单击的元素不是容器本身或 div 元素的后代时隐藏 div 容器.
var container = $("#sub-menu");
if (!container.is(event.target) && !container.has(event.target).length) {
container.hide();
}
如果您想在不测试容器本身或 div 元素的后代的情况下隐藏该容器,只需删除条件并简单地使用 container.hide();
.
另外,不要在 CSS 中的 sub-menu
上设置 display: none;
,而是手动设置它,以便您可以从第一次点击时切换 sub-menu
。
看看下面的片段:
var x = document.getElementById("sub-menu");
x.style.display = "none";
$(document).click(function (evt) {
if ($(evt.target).is('#main-menu')) { // control click event if it's main-menu
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
else {
var container = $("#sub-menu");
if (!container.is(event.target) && !container.has(event.target).length) { // if you don't want that remove the condition and write container.hide(); only
container.hide();
}
}
});
#main-menu {
display: inline-block;
height: 20px;
width: 100px;
background: blue;
padding: 5%;
}
#sub-menu {
display: inline-block;
height: 50px;
width: 50px;
background: red;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div id="main-menu">Main menu</div>
<div id="sub-menu" class="sub-menu-class">Sub menu</div>