如何使用纯JavaScript通过链接或单击外部来关闭菜单
要使用纯JavaScript通过链接或点击外部来关闭菜单，你需要执行以下步骤：
基础概念
- 事件监听：JavaScript允许你为DOM元素添加事件监听器，以便在特定事件发生时执行代码。
- 事件冒泡：当一个事件发生在某个元素上时，它会首先在这个元素上执行处理程序，然后逐级向上传播到它的父元素，直到到达文档根节点。
- 阻止默认行为：有时候需要阻止元素的默认行为，比如链接的跳转。
相关优势
- 无需额外库：纯JavaScript不需要引入任何外部库，减少了页面加载时间。
- 更好的控制：直接使用原生API可以提供更细粒度的控制和更高的性能。
类型
- 点击事件：监听用户的点击动作。
- 焦点事件：监听元素的焦点变化。
应用场景
- 移动端和桌面端的交互设计：适用于需要响应用户点击或触摸的各种界面元素。
- 模态框、下拉菜单等UI组件：这些组件通常需要在用户点击外部区域时关闭。
示例代码
以下是一个简单的示例，展示了如何实现点击外部关闭菜单的功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Close Menu on Outside Click</title>
<style>
#menu {
display: none;
position: absolute;
background: #fff;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<button id="menuButton">Open Menu</button>
<div id="menu">
<a href="#">Option 1</a><br>
<a href="#">Option 2</a><br>
<a href="#">Option 3</a>
</div>
<script>
const menuButton = document.getElementById('menuButton');
const menu = document.getElementById('menu');
menuButton.addEventListener('click', function(event) {
event.stopPropagation(); // 阻止事件冒泡
menu.style.display = 'block';
});
document.addEventListener('click', function() {
menu.style.display = 'none';
});
menu.addEventListener('click', function(event) {
event.stopPropagation(); // 防止点击菜单内部时关闭菜单
});
</script>
</body>
</html>解释
- HTML结构：一个按钮用于打开菜单，一个
div元素作为菜单容器。 - CSS样式：简单的样式使菜单看起来更美观，并设置为默认隐藏。
- JavaScript逻辑：
- 当点击按钮时，显示菜单，并阻止事件冒泡到文档。
- 当点击文档其他地方时，隐藏菜单。
- 当点击菜单内部时，阻止事件冒泡，以免关闭菜单。
遇到的问题及解决方法
- 菜单无法关闭：确保
document上的点击事件监听器正确设置，并且没有其他脚本阻止了事件的正常传播。 - 点击菜单项时菜单关闭：在菜单容器上添加一个事件监听器，使用
event.stopPropagation()来阻止点击事件传播到文档。
通过这种方式，你可以实现一个简单而有效的点击外部关闭菜单的功能。
相关·内容
我在这里的目标是，当我在菜单外部单击或单击链接时，关闭菜单。我想使用纯Javascript来实现它。现在，当我点击图标时，我的菜单就会打开，当我在我的导航外点击时，我可以关闭它(这很棒)，但我的菜单图标不再起作用，因为它在我的导航元素内。
浏览 19提问于2020-09-16得票数 0
回答已采纳
我希望使用纯javascript (而不是jquery)关闭我在单击菜单外部时创建的纯css下拉菜单。我该怎么做？如果单击子菜单外部，我想关闭子菜单。有办法用纯javascript来实现吗？到目前为止，我已经尝试过了： <scri
浏览 2提问于2015-05-05得票数 0
回答已采纳
1回答
Mega下拉菜单
、、、、
我使用的是，当我单击一个选项时，会执行href标记，但菜单保持打开状态。我被迫将鼠标从菜单上移开以关闭它。如何在用户单击或选择后关闭菜单。这是一个基于纯CSS的菜单。我想我遗漏了一些jQuery或Javascript来处理这个事件。你会帮我吗？
浏览 1提问于2011-02-22得票数 0
回答已采纳
9回答
在我的Blazor server-side项目中，我需要通过在菜单外部单击来关闭弹出菜单。我使用一个简单的If语句通过触发onClick事件来显示/隐藏弹出窗口。但不存在通过在弹出菜单外部单击来关闭弹出窗口的事件。因此，用户应该只通过单击带有onClick事件的元素
浏览 1提问于2020-04-22得票数 6
1回答
(TL;DR)(全部)jQuery(document).ready(function() {
jQuery这很好，但它是一个切换，并且只在主导航链接上工作。如果用户在mega<em
浏览 7提问于2022-08-22得票数 0
1回答
单击/关闭时关闭响应菜单
、、、、
我已经设法使菜单在您单击/触摸菜单外部时关闭，但是当单击(该菜单中)的链接时如何停止关闭菜单？下面是我的javascript： var clickover
浏览 0提问于2016-01-15得票数 3
1回答
我添加了一个闪亮的标题下拉菜单按钮。它将在其按钮单击时打开内容，如果再次单击该按钮或单击内容外部，则关闭内容。以下是我想要达到的目标：当我们单击内容外部
浏览 4提问于2021-05-13得票数 0
回答已采纳
4回答
我使用javascript函数dropdown('toggle')启动引导下拉菜单，如声明的。在中，您将看到两个菜单：
另一个，使用右键单击，它不能像预期的那样工作。(它不会在单击
浏览 6提问于2015-09-08得票数 2
回答已采纳
3回答
单击外部引导程序菜单将其关闭
、、、、
我试图找到解决方案，以关闭引导程序菜单时，单击外部(在移动窗口大小)，但无法得到它的工作，我得到它工作时，点击其中一个'a‘链接，这段代码： $('.navbar-toggle').toggleClass('collapsed'); // button});
但是
浏览 1提问于2016-01-19得票数 0
回答已采纳
1回答
是否可以使用命令：ffmpeg -i video_1920.mp4 -vf scale=640:360 video_640.mp4 -hide_banner来降低纯JavaScript中视频的分辨率。例如，我有一个下拉菜单，其中有< a >标记，所以我想通过单击带有JS的菜单超链接来进行视频质量选择。如何正确地实施，请帮助。
浏览 3提问于2018-01-15得票数 6
我正在尝试生成的功能，下拉菜单可以显示/隐藏下拉按钮点击。它也将通过单击页面上的任意位置来关闭。但是，我不能用纯javascript生成它。你能帮帮我吗？ </ul> <li class="nav-item"><a class="nav-link" href="#">Contact</a>
浏览 24提问于2020-06-13得票数 0
回答已采纳
1回答
我有一个Navbar组件，在这里我创建了一个汉堡包菜单，当我点击汉堡包菜单时，我想要显示菜单组件，它是一个单独的组件。单击外部容器可以使用npm包react-outside-click-handler，但是当我单击链接时，我的<e
浏览 1提问于2021-12-21得票数 2
回答已采纳
1回答
我是javascript的新手，所以我来这里寻求你的帮助。这是一个有反应的肚脐和JS。
当用户单击切换按钮时，菜单会出现(带有动画)或消失。就这样办。但是我想做更多的事情，当用户点击这个菜单的一个链接时，菜单就被隐藏了。我的问题是，当用户再次单击切换按钮之后，动画就不能工作，所以菜单就不会出现。当加载页面时，它只工作一次。我希望动画运行每次我们点击这个按钮，无论是通过关闭菜
浏览 6提问于2020-06-11得票数 1
回答已采纳
2回答
因此，例如，Javascript在页面加载后加载的广告不会出现在搜索引擎视图中，但仍然会显示与正常网站视图类似的布局。我很确定我想要找到的网站是在SEOMoz或其他有声望的网站上提到的，但我无法在我的一生中找到它。有什么建议或类似的工具会有帮助吗？
浏览 0提问于2013-05-27得票数 1
回答已采纳
我有一份画布菜单。打开菜单时，仍然可以看到少量的普通页面内容。单击或点击此区域时，菜单将关闭。当菜单打开时，我如何禁用链接、输入等？我可以用JavaScript (我在使用jQuery)来完成这个任务吗？Jav
浏览 2提问于2015-06-02得票数 0
回答已采纳
我正在使用角度NG2-管理，并试图隐藏菜单项，以降低分辨率。而且菜单不是在移动视图中关闭，而是阻塞了一半内容的视图。当前行为：当分辨率为1200 it或更低时，当菜单展开时，当我们单击
浏览 5提问于2020-06-29得票数 0
2回答
单击按钮本身关闭下拉菜单。
、、、、
我在这个网站上看到了很多关于通过点击页面上任何地方来关闭下拉菜单的问题。
不过，我的问题有点不同。我不希望下拉菜单通过点击外部关闭。当我单击显示菜单的按钮时，我希望菜单保持不变(下降)，直到用户再次单击相同的按钮。同时，在菜单显示的那一刻，我希望它直接将其他元素推到它下面。例如，这些元素可以是其他按钮。这很可能是用Javascript做的，因为这
浏览 4提问于2016-05-21得票数 2
回答已采纳
3回答
自动完成搜索建议下拉菜单
、、、、
我正在尝试创建一个弹出式div (当文本框值发生变化时)，它可以通过单击div之外的任何位置来关闭(可见性:无)。类似于谷歌建议下拉菜单。请帮帮忙。
浏览 3提问于2011-03-03得票数 1
回答已采纳
3回答
我正在尝试通过单击菜单外的按钮来关闭我的汉堡菜单。现在关闭汉堡包菜单的唯一方法是点击X图标。我仍然希望菜单能够通过单击图标来关闭，但也可以通过在菜单外单击来关闭它。有人有什么解决方案吗？
浏览 29提问于2017-06-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
