javascript - 如何通过使用 javascript 在外部单击来隐藏下拉菜单
问题描述
我有一个简单的下拉脚本,我希望它在菜单外单击时隐藏所有打开的下拉列表。但它似乎不起作用,有谁知道为什么?我只使用 html css 和 Javascript 没有 jQuery 或 Bootstrap
function showerClickSub() {
document.getElementById("my-sub").classList.toggle("show");
document.getElementById("my-sub1").classList.remove("show");
}
function showerClickSub() {
document.getElementById("my-sub").classList.toggle("show");
document.getElementById("my-sub1").classList.remove("show");
}
function showerClickSub1() {
document.getElementById("my-sub1").classList.toggle("show");
document.getElementById("my-sub").classList.remove("show");
}
// Close the dropdown menu if the user clicks outside of it
document.onclick = function(event) {
if (!event.target.matches('.sub-menu')) {
let dropdowns = document.getElementsByClassName("sub-active");
let i;
for (i = 0; i < dropdowns.length; i++) {
let openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
<nav class="navBar navBar-active">
<ul>
<li><a href="#" class="active">Home</a></li>
<li class="sub-menu"><a href="#" onClick="showerClickSub()">Services<span class="arrow-down"></span></a>
<ul id="my-sub" class="dropdown-content">
<li><a href="#">Home</a></li>
<li><a href="#">Home1</a></li>
<li><a href="#">Home2</a></li>
<li><a href="#">Home3</a></li>
</ul>
</li>
<li class="sub-menu1"><a href="#" onClick="showerClickSub1()">Service area<span class="arrow-down"></span></a>
<ul id="my-sub1" class="sub-active1" >
<li><a href="#">Home4</a></li>
<li><a href="#">Home5</a></li>
<li><a href="#">Home6</a></li>
<li><a href="#">Home7</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
解决方案
你在寻找这样的东西吗?基本上,您创建一个触发器以在单击文档时向上滑动下拉列表。
$(document).ready(function() {
// Show hide popover
$(".dropdown").click(function() {
$(this).find(".dropdown-menu").slideToggle("fast");
});
});
$(document).on("click", function(event) {
var $trigger = $(".dropdown");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$(".dropdown-menu").slideUp("fast");
}
});
ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a {
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul.dropdown-menu {
min-width: 100%;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li ul.dropdown-menu li {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
<a href="#">dropdown ▾</a>
<ul class="dropdown-menu">
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
</ul>
</li>
</ul>
推荐阅读
- amazon-web-services - 为什么我的 CloudWatch 计数与 AWS API Gateway 错误计数不同?
- python - 有效地找到熊猫日期之间的重叠
- php - 获取自定义帖子而不是默认的 Wordpress 帖子
- python - 使图形/图形之间的跟踪颜色保持一致
- request - 使用 Postman 的授权令牌/Cookie 向 Instagram 发送请求
- node.js - 当我尝试在 Windows 命令提示符下运行“npm run test”时出错
- python - Pytorch - 如何沿轴索引具有不同大小的张量
- android - Jetpack compose:BottomSheet 状态更改回调
- swift - Swift 将约束扩展添加到具有关联类型的协议
- anylogic - 如何编写查询以在 AnyLogic 中获取不相等?