如何让div下拉下拉菜单中的另一个div
要实现让一个div下拉菜单中的另一个div，可以通过以下步骤：
- HTML结构：首先，在HTML中创建一个包含下拉菜单的div和另一个需要下拉的div。例如：
<div class="dropdown">
<button class="dropdown-btn">下拉菜单</button>
<div class="dropdown-content">
<p>需要下拉的内容</p>
</div>
</div>- CSS样式：使用CSS样式来控制下拉菜单的显示和隐藏。例如：
.dropdown-content {
display: none;
}
.dropdown.active .dropdown-content {
display: block;
}这里通过设置.dropdown-content的display属性为none来隐藏下拉内容，然后通过.dropdown.active .dropdown-content选择器来在.dropdown被激活时显示下拉内容。
- JavaScript交互：使用JavaScript来实现下拉菜单的交互效果。例如：
var dropdownBtn = document.querySelector('.dropdown-btn');
var dropdown = document.querySelector('.dropdown');
dropdownBtn.addEventListener('click', function() {
dropdown.classList.toggle('active');
});这里通过监听下拉按钮的点击事件，当点击按钮时，通过给.dropdown添加或移除active类来切换下拉菜单的显示和隐藏。
以上就是实现让一个div下拉菜单中的另一个div的基本步骤。根据具体需求，可以进一步添加样式和功能来完善下拉菜单的效果。
相关·内容
2回答
如何修复Javascript中的下拉菜单？
javascript
我正在为我的项目制作一个导航条，它有几个下拉菜单，下面是我的导航条代码：
<nav>
<a class="logo" href="{% url 'home' %}">LOGO</a>
<div class="navbar">
<div class="dropdown">
<a href="#" class="dropdown-btn" id="dropd
浏览 1提问于2019-03-23得票数 0
回答已采纳
1回答
带有焦点的CSS下拉菜单
html、css、drop-down-menu、tabindex、jquery-events
我有一个简单的自定义CSS下拉菜单，如。单击下拉菜单按钮将切换其下方容器的显示(这是绝对定位的)。我试图模仿HTML select元素的行为，其中focusout也隐藏了菜单。这样做最好的方法是什么？如果我向下拉内容div添加一个焦点事件处理程序，单击按钮本身将导致双触发器(焦点突出并切换)。
$('.dropdown-btn').on('click', function (e) {
$('.dropdown-content').toggleClass('hide');
});
$('.dropdown-btn&#
浏览 2提问于2017-08-31得票数 2
2回答
我正在尝试添加一个下拉菜单与HTML，CSS和Javascript
javascript、html、css
我正在尝试添加一个下拉菜单到我的迷你项目的下拉类。我已经能够对第二个栏这样做了，它可以工作，但对第一个不起作用。我刚刚开始学习html、css和javascript，我正在尝试复制一家酒店的主页。
这是HTML。我只包含了下拉菜单部分。
<div class = "dropdown">
<a href="#">Currency</a>
<div class ="dropdown-content">
<a href="">Naira</
浏览 0提问于2020-04-03得票数 0
2回答
display设置为none后，下拉菜单不会关闭
javascript、html
我有一个下拉菜单。我为下拉内容添加了一个javascript addevent侦听器，当我单击一个选项时，它将关闭。它工作得很好。 Javascript const element = document.querySelector(".dropdown-content");
element.addEventListener("click", () => {
element.style.display ="none";
}); <div class="dropdown" id =&
浏览 52提问于2021-09-22得票数 1
回答已采纳
2回答
下拉列表移动其他元素
javascript、html、css、drop-down-menu
这里我有一个完全使用香草JavaScript的下拉列表。但是当我点击dropdown-btn时，它会移动其他元素。 let dropdownBtn = document.querySelector("button.dropdown-btn");
let itemListWrapper = document.querySelector("div.item-list-wrapper");
dropdownBtn.addEventListener("click", () => {
if (itemListWrapper.style.d
浏览 23提问于2021-06-27得票数 1
回答已采纳
2回答
单击外部时关闭下拉菜单
javascript、html、css
单击按钮时，下拉菜单应打开。
如果你点击外面的下拉，它应该会再次关闭。
当下拉菜单处于活动状态时，我尝试将事件侦听器添加到主体中，然后检查单击是否发生在下拉菜单之外。
如何在没有超时函数的情况下编写以下代码，并在单击时关闭下拉列表，而不是在之外而不是在内部？
<div class="dropdown dropdown__open">
Open Dropdown
<div class="dropdown__window">
<a class="dropdown__link
浏览 14提问于2022-04-03得票数 2
回答已采纳
3回答
css定位中的下拉菜单项
html、css
我想用CSS制作下拉菜单..。我已经有了一个带有“固定”位置的菜单(第一个菜单必须是固定的，没有其他的)，但是当我试图设计我的下拉菜单时，它中的项目不会到达我想要的位置，并且总是与第一个菜单对齐.请告诉我怎么做正确..。
#menu {
overflow: hidden;
position: fixed;
top: 0;
width: 50%;
margin-left: 25%;
background-color: #333;
浏览 3提问于2017-10-24得票数 0
1回答
向下拉导航栏添加大括号
java、html、css
嘿，伙计们，我在我的导航栏中添加支撑线条时遇到了麻烦，因为导航栏有一个下拉菜单。在我继续做其他事情之前，我想把这件事搞清楚。我也很难让下拉内容停留在下拉主题部分的下方。例如，如果我在History下拉菜单中选择“Camera”选项卡，并且我想选择"Pioneers“选项卡，则下拉框会覆盖History下拉菜单，我希望它像第一次悬停在History上时一样停留在History下拉菜单的下方。
这是我的主页HTML
<!DOCTYPE html>
<html>
<head>
<title>Film History</title&
浏览 11提问于2020-05-15得票数 2
回答已采纳
1回答
单击下拉菜单时，侧边栏需要变高
javascript、html、css、drop-down-menu
目前我有一个侧边栏，有一个下拉功能。当下拉菜单被点击时，我希望我的侧边栏的高度增加。在JavaScript中，我有一个在按钮之间切换的循环，以便它们可以显示/隐藏。在CSS中，我有一个定义的高度为60%，理想情况下，当下拉菜单被点击时，高度将达到80%。在HTML中，我只有sidenav的链接。
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventList
浏览 6提问于2019-07-15得票数 0
回答已采纳
1回答
在另一个`<Button>`上悬停时交替使用`<Button>`颜色
javascript、css、button
我有两个按钮。第一个是下拉菜单，当它悬停时，显示两个兄弟级<a href>。另一个按钮也是同级的，一个formaction重定向到另一个页面。
问题#1
我希望bg-颜色和颜色的下拉菜单按钮改变时，悬停其<a href>之一。
问题#2
我希望bg-颜色和颜色的下拉菜单按钮改变时，悬停后，formaction按钮。
我试着用下面的css来解决这个问题，但我似乎无法让它发挥作用。
.movie-info:hover .dropbtn{
background-color: #A7A774;
color: white;
}
我的css和html：
.dropbtn {
浏览 0提问于2020-10-31得票数 0
回答已采纳
1回答
CSS和JavaScript DropDown菜单
javascript、html
这是我第一次尝试用CSS和Java脚本创建一个简单的下拉菜单。这是HTML代码。
<div class="dropdown menu1">
<button>Menu 1</button>
<div class="dropdown-content">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
</div>
&l
浏览 0提问于2017-04-26得票数 1
回答已采纳
1回答
如何在移动设备上关闭基于悬停的CSS下拉菜单
javascript、html、css
我正在尝试制作一个可以在台式机、平板电脑和移动设备上动态工作的网页。我在悬停选择器的基础上做了一个CSS only下拉菜单(我想这就是它的名字，我还是个新手)。它在桌面上效果很好，在移动设备上显示得很好，我的问题是，下拉菜单在没有与移动设备交互时不会隐藏起来。我知道hover不能将will翻译成移动设备，我希望通过点击下拉菜单，它会再次隐藏起来。 我试图用一个按钮和一个小javascript重新创建下拉菜单，但是尝试用css来定位元素变得一团糟。似乎css唯一的方法对于样式来说是最简单的。不过，我对涉及javascript的想法持开放态度。 另外，请原谅那些乱七八糟的css，我还没有把它清理
浏览 12提问于2019-04-17得票数 0
3回答
如何使用css、javascript和html扩展下拉菜单？
jquery、html、css
我有一个下拉菜单在我的页面，当用户点击下拉菜单按钮按钮应该展开并显示数据。
这就是我想要的
这是HTML
<div claa="demo">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></
浏览 5提问于2018-09-19得票数 0
2回答
在额外单击一次后按住JavaScript键并单击响应
javascript、html、css
我正在尝试使用CSS和JavaScript创建一个下拉列表。 document.querySelector('.dropdown-btn').addEventListener("click", function() {
let list = document.getElementById("project-list");
if (list.style.display === "none") {
list.style.display = "inline-block";
} else {
浏览 11提问于2021-07-06得票数 1
回答已采纳
1回答
CSS下拉选择问题
css
我遇到的问题是，一旦我选择了一个菜单选项，就没有与当前选择的菜单选项对应的下拉列表。我似乎找不到正确的答案，也无法在谷歌上搜索正确的问题来获得答案。
除此之外，整个下拉菜单都工作得很好，除非我选择了一个像"Drivers“这样的下拉菜单项，如果我重新高亮显示"Drivers”，一旦它已经被选中，现在就没有下拉菜单了。我将不得不选择说.."Home“，然后是未选中的"Drivers”选项，此时会出现下拉菜单。
我希望我已经把我的要求讲得足够清楚了，下面是我的代码。
CSS：
/***** Begin Menu CSS *****/
ul {
width:
浏览 2提问于2017-03-09得票数 0
7回答
onclick第一次需要两次单击
javascript、html、css
我才刚开始学习JavaScript。
我编写了一个简单的下拉菜单，但是当您最初加载页面时，要显示链接列表，需要在“下拉”-按钮(带有onclick属性)上单击两下。
在此之后，它按照预期工作--您只需要在按钮上单击一次就可以显示/隐藏列表。
但是，为什么在加载站点后，我必须点击该按钮两次呢？
下面是我的HTML/CSS：
#dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointe
浏览 0提问于2018-04-30得票数 2
2回答
下拉菜单简单显示，然后消失。
javascript、html、google-chrome-extension
我正在为我的Chrome扩展创建一个下拉菜单。有一些Javascript代码会导致菜单显示出来，但是当我单击按钮时，下拉菜单在消失之前只会出现一秒(看起来像是闪烁效果)。任何帮助都将不胜感激。谢谢!
welcome.html
<form>
<div class="dropdown">
<button id="dropdownbtn" class="dropbtn">Dropdown</button>
浏览 5提问于2017-07-05得票数 0
回答已采纳
1回答
悬停下拉菜单和列表
html、css、menu、html-lists、navbar
我目前正在尝试使用列表创建一个垂直导航栏，但是当我在ul上悬停时，所有的li下拉菜单都会出现，或者它们根本就不会出现，我遇到了一些问题。有解决办法吗？
HTML：
<body>
<div class="navbar">
<ul>
<li>title</li>
<li>main text</li>
<div class="dropdown-content">
浏览 2提问于2016-05-08得票数 0
回答已采纳
2回答
如何在用户单击时关闭下拉菜单
javascript、css、navigation
我正在使用一个可点击的下拉菜单导航。下拉列表使用了一个input标记。我被卡住的地方是，如果访问者点击页面上的其他地方，我需要关闭下拉菜单。我尝试使用目标属性、matches()方法和onclick事件。 我在控制台中注意到的是，当我打开dropdown时，两个条件语句都出现了，但dropdown没有打开。就好像下拉列表同时打开和关闭一样。 我做错了什么?我如何让它正常工作，以便用户只需打开下拉菜单，并在单击网页上的其他地方时将其关闭？ 提前感谢！下面是代码。下面是代码：https://codepen.io/bfoley650/pen/NWxeXRB?editors=1111 HTML &l
浏览 19提问于2020-07-22得票数 0
回答已采纳
2回答
Dropdown需要多次单击才能打开
javascript、jquery
我已经通过使用javascript的迭代创建了多个下拉列表。它工作得很好，除了有一个点，用户必须单击两次才能使下拉菜单工作。 这发生在用户点击一个下拉列表，而不是点击关闭它，然后点击另一个下拉列表，然后关闭第一个下拉列表，但如果他们再次点击第一个下拉列表，它需要两次点击才能打开。 在这种情况下，有没有办法只点击一次？(我只粘贴了dropdown html的相关代码) $(document).on('turbolinks:load', function() {
$('.dropbtn').click(function() {
if ($(this
浏览 86提问于2019-03-13得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
