gpt4 book ai didi

javascript - 非点击目标时子菜单不隐藏

转载 作者:行者123 更新时间:2023-11-28 16:07:03 25 4
gpt4 key购买 nike

几天来我一直在努力解决这个简单的问题。我的其中一个导航菜单选项卡的子菜单应该在单击其他元素时关闭,但它不会关闭。

var query = document.querySelector.bind(document);

query('.drop-down').onclick = function() {
query('.sub-menu').classList.toggle('nav-show');
}

window.onclick = function(e) {
if (query('.sub-menu').style.display == 'block') {
if (e.target != query('.sub-menu')) {
query('.sub-menu').classList.remove('nav-show');
}
}
}
.menu {
display: table;
background: #f9f8f8;
padding: 0;
margin: 5em auto;
border-radius: 0.5em;
box-shadow: 0 3px 8px -5px rgba(0, 0, 0, 0.8);
}
.menu > li {
display: table-cell;
width: 100px;
list-style: none;
text-align: center;
}
.menu > li.drop-down {
position: relative;
}
.menu > li > a {
display: block;
text-decoration: none;
color: #9c9c9f;
padding: .8em;
font: 1em Arial, sans-serif;
}
.menu > li > a:hover {
color: #757579;
}
.sub-menu {
position: absolute;
padding: 0;
top: 100%;
right: 0;
left: 0;
background: #f9f8f8;
border: 1px solid #f1f1f1;
box-shadow: 0 3px 8px -5px rgba(0, 0, 0, 0.8);
display: none;
}
.sub-menu.nav-show {
display: block;
}
.sub-menu > li {
list-style: none;
display: block;
text-align: center;
}
.sub-menu > li:not(:first-child) {
border-top: 1px solid #f1f1f1;
}
.sub-menu > li > a {
text-decoration: none;
display: block;
font: 0.9em Arial, sans-serif;
color: #9c9c9f;
padding: 1em 0;
}
.sub-menu > li > a:hover {
background: white;
}
<ul class="menu">
<li><a href="" onclick="return false">Home</a>
</li>
<li class="drop-down"><a href="" onclick="return false">Projects</a>
<ul class="sub-menu">
<li><a href="/">HTML</a>
</li>
<li><a href="/">CSS3</a>
</li>
<li><a href="/">JavaScript</a>
</li>
<li><a href="/">PHP</a>
</li>
</ul>
</li>
<li><a href="" onclick="return false">Forums</a>
</li>
<li><a href="" onclick="return false">Blog</a>
</li>
</ul>

谁能帮我解决这个问题?

最佳答案

您将需要 stopPropagation() method以防止执行任何父事件处理程序。参见 w3 wiki获取更多信息。

这是一个使用 jQuery 的简单示例:

$(".drop-down").click(function(e) {
e.stopPropagation();
$('.sub-menu').toggleClass('nav-show');
});

$(document).click(function(e) {
$('.sub-menu').removeClass('nav-show');
});
.menu {
display: table;
background: #f9f8f8;
padding: 0;
margin: 5em auto;
border-radius: 0.5em;
box-shadow: 0 3px 8px -5px rgba(0, 0, 0, 0.8);
}
.menu > li {
display: table-cell;
width: 100px;
list-style: none;
text-align: center;
}
.menu > li.drop-down {
position: relative;
}
.menu > li > a {
display: block;
text-decoration: none;
color: #9c9c9f;
padding: .8em;
font: 1em Arial, sans-serif;
}
.menu > li > a:hover {
color: #757579;
}
.sub-menu {
position: absolute;
padding: 0;
top: 100%;
right: 0;
left: 0;
background: #f9f8f8;
border: 1px solid #f1f1f1;
box-shadow: 0 3px 8px -5px rgba(0, 0, 0, 0.8);
display: none;
}
.sub-menu.nav-show {
display: block;
}
.sub-menu > li {
list-style: none;
display: block;
text-align: center;
}
.sub-menu > li:not(:first-child) {
border-top: 1px solid #f1f1f1;
}
.sub-menu > li > a {
text-decoration: none;
display: block;
font: 0.9em Arial, sans-serif;
color: #9c9c9f;
padding: 1em 0;
}
.sub-menu > li > a:hover {
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li><a href="" onclick="return false">Home</a>
</li>
<li class="drop-down"><a href="" onclick="return false">Projects</a>
<ul class="sub-menu">
<li><a href="/">HTML</a>
</li>
<li><a href="/">CSS3</a>
</li>
<li><a href="/">JavaScript</a>
</li>
<li><a href="/">PHP</a>
</li>
</ul>
</li>
<li><a href="" onclick="return false">Forums</a>
</li>
<li><a href="" onclick="return false">Blog</a>
</li>
</ul>

关于javascript - 非点击目标时子菜单不隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38999080/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com