如何在单击下拉菜单中的按钮时隐藏下拉菜单
在前端开发中，可以通过以下步骤来实现在单击下拉菜单中的按钮时隐藏下拉菜单：
- 首先，在HTML中创建一个下拉菜单的按钮和下拉菜单的容器。按钮可以使用
<button>标签，下拉菜单的容器可以使用<div>标签，并设置一个唯一的ID用于后续操作。
<button onclick="toggleDropdown()">下拉菜单按钮</button>
<div id="dropdownMenu">
<!-- 下拉菜单内容 -->
</div>- 在CSS中设置下拉菜单的样式，并将其隐藏起来。可以使用
display: none;来隐藏下拉菜单。
#dropdownMenu {
display: none;
/* 其他样式设置 */
}- 在JavaScript中编写一个函数，用于切换下拉菜单的显示和隐藏状态。可以使用
getElementById方法获取下拉菜单的容器，并使用style.display属性来设置其显示或隐藏。
function toggleDropdown() {
var dropdownMenu = document.getElementById("dropdownMenu");
if (dropdownMenu.style.display === "none") {
dropdownMenu.style.display = "block";
} else {
dropdownMenu.style.display = "none";
}
}- 最后，在页面中引入CSS和JavaScript文件，并调用
toggleDropdown()函数来实现下拉菜单的显示和隐藏。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<button onclick="toggleDropdown()">下拉菜单按钮</button>
<div id="dropdownMenu">
<!-- 下拉菜单内容 -->
</div>
</body>
</html>这样，当单击下拉菜单的按钮时，就会触发toggleDropdown()函数，从而切换下拉菜单的显示和隐藏状态。
相关·内容
我不是一个真正的程序员，我设法克服了基本html中的下拉列表问题，然后在php中使用Dreamweaver中的javascript。我甚至在不重新加载页面的情况下使用Ajax实现了它。感谢那些在plus2net中创建它的人。以下是我从中受益的链接。
我的问题是有一个Wordpress页面。Wordpress有一个用于生成页面、帖子等下拉列表的buit-in函数。我使用了wp_dropdown_pages函数，它的引用
浏览 3提问于2015-01-21得票数 1
假设我是一些公共团体的成员。但我不想让人们，无论是朋友还是“每个人”，看到我所在的所有公共团体的名单。只有我应该看到我所在的所有公共团体的名单。
浏览 0提问于2018-01-20得票数 4
4回答
我使用javascript函数dropdown('toggle')启动引导下拉菜单，如声明的。在中，您将看到两个菜单：
另一个，使用右键单击，它不能像预期的那样工作。(它不会在单击外部或元
浏览 6提问于2015-09-08得票数 2
回答已采纳
2回答
Fiddler演示html内容
在这里我有引导按钮，这将显示下拉菜单点击。注意:我只想在标题div的上方显示下拉菜单项。
浏览 2提问于2015-11-24得票数 0
1回答
演示HTML内容的小提琴：当我单击我的按钮时，下拉菜单内容隐藏在标题div后面。如何将下拉菜单项显示在标题div的上方
注意:我只想在标题div的上方显示下拉菜单项。
浏览 1提问于2015-11-25得票数 0
1回答
我正在编写一个应用程序，在GUI中有一个包含直接来自后端数据的值的下拉列表。然而，有一个新的要求来了，当用户浏览下拉菜单并单击键盘/鼠标右键删除按钮时，我们应该隐藏下拉菜单中的值，并且不再在GUI中显示它，但我不想删除后端数据库中隐藏的值。对我来说困难的是如何在我的
浏览 1提问于2016-05-13得票数 0
当我单击Dropdown.Item时，Dropdown.Menu会隐藏。我想要防止这种情况，即单击Dropdown.Menu后保持打开，，只有在 Dropdown 之外有单击时才关闭。我发现了类似的问题，但在最初的引导中使用jQuery。如何在react引导中实现这一点？
浏览 9提问于2020-08-07得票数 4
我有一个运行Ubuntu16.04LTS的GPD袖珍，它带有统一和火狐量子。GPD口袋是一个小上网本(7英寸显示器)。因此，对于某些网站，我更希望在这个屏幕上看到该网站的移动版本(主要是在我的工作的群件服务器上)。我不在乎这是一个每个网站或全球设置，因为我使用不同的火狐配置文件不同的事情。
浏览 0提问于2018-01-11得票数 15
回答已采纳
2回答
我有一个下拉菜单，如jsfiddle 所示onmouseout="hidediv()";
对于包含下拉菜单的div --但是，当您单击使下拉菜单出现的链接时，当您将鼠标移到下拉菜单上时，它有时会消失。其他情况下，当您在列表中的第一项上移动时，它会挂在周围，但是当
浏览 4提问于2015-05-04得票数 2
回答已采纳
1回答
我有五个按钮，对于每个按钮，如果你将鼠标放在它上面，它将弹出下拉菜单(下拉列表的默认设置是单击，但我需要该按钮在单击按钮时实现一些其他目的，所以我使用e.stopPropagation()来防止单击弹出操作在css文件中，我设置了 display: block;我的问题是，当我单击
浏览 6提问于2015-02-04得票数 0
1回答
所以我刚刚开始使用引导程序的下拉菜单。很方便，但我有个问题。为了使下拉菜单工作，似乎在添加html属性data-toggle="dropdown"时完全禁用了触发下拉菜单的元素的原始函数(.下拉切换)。这是有道理的，因为你不想让下拉按钮做其他神奇的事情(特别是当你试图访问菜单时，重定向到一个新页面或锚)。
但是，我有一个submit按钮，当您单击</em
浏览 1提问于2012-12-09得票数 3
回答已采纳
1回答
当我单击一个按钮时，必须显示一个下拉菜单。当我点击页面中的任何地方时，它需要隐藏起来。我遇到的问题是:当我运行页面时，我看到的是下拉菜单而不是单击事件。我尝试了不同的div标记，但是没有效果。
浏览 3提问于2012-04-02得票数 0
回答已采纳
1回答
当我点击next按钮时，如何激活/打开侧面导航栏中的next下拉菜单。如果我单击上一步按钮，如何在侧面导航栏中打开上一步下拉菜单。
浏览 20提问于2019-10-29得票数 0
可能重复：
当我们单击“更多”按钮时会显示下拉菜单，要再次隐藏下拉菜单，我们应该再次单击“更多”按钮。但是我想通过点击身体上的任何地方来关闭下拉菜单，有人能告诉我怎么做吗？
提前感谢
浏览 3提问于2011-10-28得票数 2
回答已采纳
如果我多次点击选项卡来缩进某物，那么我总是会看到一个涂油的窗口：这太烦人了，我怎么才能阻止呢？
我必须写一些东西，如果我然后按制表符--如果我再按一下选项卡，有时会出现下拉菜单，那么Insert Button窗口就会显示。
浏览 0提问于2018-03-17得票数 5
回答已采纳
1回答
下面是我试图实现的一个例子：
如何在下拉菜单中创建文本表单。按照该示例，如何将登录(当前位于导航栏中)移动到下拉菜单，并仍然保留单击时所做的操作(但现在在下拉菜单中显示文本框和登录按钮)？
浏览 5提问于2015-08-08得票数 1
回答已采纳
1回答
我有一个值的数组，它将呈现一个带有下拉菜单的列表。我会在单击某个元素时显示/隐藏下拉菜单。project.id && ( <li>option</li> )})) 如何在外部单击<
浏览 23提问于2021-07-22得票数 0
回答已采纳
我有一个下拉菜单，它有display: none，当悬停在parent上时，它有通过CSS的display: block。下拉菜单链接到同一页面上的锚点，所以当我点击时，我希望下拉菜单消失，这样我就可以点击 $('.dropdown-menu').css("display", "none") 然而，jquery现在已经覆盖了在悬停时发生的如何在单击<
浏览 30提问于2017-07-24得票数 1
回答已采纳
在WooCommerce中，我有一个名为size的属性。
但是，我不知道如何为我的自定义按钮定义单击操作，也看不到任何文档。因此，当用户单击我的自定义按钮，然后单击add to cart时，它会向购物车添
浏览 0提问于2021-04-29得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
