html和css中的Dropdown Div (可能是javascript?)
Dropdown Div是一个常见的前端开发组件，用于创建下拉菜单或下拉列表。它通常由HTML、CSS和JavaScript组成。
HTML是用于创建网页结构的标记语言，而CSS是用于定义网页样式的样式表语言。Dropdown Div通常由一个包含下拉菜单选项的div元素和一个触发下拉菜单显示/隐藏的按钮或链接组成。
在HTML中，可以使用以下代码创建一个简单的Dropdown Div：
<div class="dropdown">
<button class="dropdown-button">点击我</button>
<div class="dropdown-content">
<a href="#">选项1</a>
<a href="#">选项2</a>
<a href="#">选项3</a>
</div>
</div>在上面的代码中，.dropdown类用于定义整个Dropdown Div的容器，.dropdown-button类用于定义触发下拉菜单显示/隐藏的按钮，.dropdown-content类用于定义下拉菜单的内容。
接下来，可以使用CSS来定义Dropdown Div的样式，例如下拉菜单的位置、背景颜色、字体样式等。
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}在上面的代码中，.dropdown类的position: relative属性用于设置相对定位，.dropdown-content类的display: none属性用于隐藏下拉菜单，.dropdown:hover .dropdown-content选择器用于在鼠标悬停时显示下拉菜单。
最后，可以使用JavaScript来实现Dropdown Div的交互功能，例如点击按钮时显示/隐藏下拉菜单。
document.querySelector('.dropdown-button').addEventListener('click', function() {
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === 'block') {
dropdownContent.style.display = 'none';
} else {
dropdownContent.style.display = 'block';
}
});在上面的代码中，通过添加点击事件监听器，当按钮被点击时，切换下拉菜单的显示状态。
Dropdown Div在网页开发中广泛应用于导航菜单、下拉选择框、多级菜单等场景。腾讯云提供了丰富的云计算产品，例如云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品。更多关于腾讯云产品的信息，请访问腾讯云官方网站：https://cloud.tencent.com/。
相关·内容
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
3回答
当单击屏幕上的任何位置时，如何隐藏下拉菜单？(javascript)
javascript、html、css
我想让它，所以当你点击任何地方的网页，它隐藏下拉菜单，我想要一个动画，当下拉打开和关闭。我试过多种方法，但都没有用。我想让它，所以当你点击任何地方的网页，它隐藏下拉菜单，我想要一个动画，当下拉打开和关闭。我试过多种方法，但都没有用。
以下是整个代码：
Javascript：
function Dropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
event.stopPropagation = function(event) {
if (!ev
浏览 6提问于2022-07-21得票数 0
1回答
如何在显示页面时激活菜单按钮？
javascript、html、css、blogger
有人能帮我在active-based中插入菜单按钮吗？我需要它适合我的博客菜单。请..。我真的需要帮助..。
如上图所示，它实际上看起来像这样。
我已经尝试了许多活动的基础上使用JavaScript，CSS，但没有一个工作。
下面是我的CSS代码，有什么问题吗？
.dropbtn {
background-color: grey;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-bl
浏览 1提问于2021-05-21得票数 1
1回答
：html和css中的悬停用法
html、css
谁能告诉我在哪里可以使用:hover？在最后一行CSS中，它是.dropdown:hover .dropdown-content，当我将鼠标悬停在dropdown元素上时，它会给我一个下拉菜单。
但是，如果我使用.dropbtn:hover .dropdown-content，则不会显示下拉菜单。为什么会这样呢？
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
di
浏览 0提问于2018-07-27得票数 0
2回答
放下，并在右边对齐
css、menu
我正在使用这个下拉菜单，它向下与左边的按钮对齐，但我希望它朝相反的方向下降，因为它是在移动上离开屏幕的。我附上图片来显示它在做什么和我想让它做什么。
<div class='dropdown'>
<button class='dropbtn'>Hi, Anthony ▼</button>
<div class='dropdown-content'>
<a href='index.php?c=my-profile'>My Golfer Pro
浏览 1提问于2018-12-06得票数 1
回答已采纳
1回答
导航栏中的下拉列表
html、css、twitter-bootstrap
我试过关注this tutorial，但我似乎不明白为什么当鼠标悬停在导航栏中的下拉按钮上时，下拉菜单根本不会出现。 这是代码的HTML部分： <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https:
浏览 11提问于2021-01-25得票数 0
回答已采纳
1回答
如何设置下拉菜单以覆盖容器
html、css
我已经创建了一个使用html/css的子菜单，现在我试图在这些链接上应用一个下拉菜单，但是我很难将下拉菜单放到上面。如你所见，它现在被卡在容器里了。下面是链接： (我正在使用wordpress)
.menu-row {
display: flex;
justify-content: space-around;
}
.dropbtn {
color: #1a1a1a;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container - needed to position the dropdown
浏览 1提问于2019-05-14得票数 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
回答已采纳
1回答
当jquery显示元素时，焦点访问性就会丢失。
javascript、jquery、html、css
我有一个页面与许多下拉菜单，这是可见的悬停事件，使用css。但是，当我按tab键时，我也想让它们可见，并且使用jquery将它们放在焦点上。我试过这个：
发生了以下情况：
$("body").keydown( function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 9) {
$("*").bind("focus",function(){
var $self = $(this);
浏览 1提问于2016-11-14得票数 1
2回答
按表隐藏的下拉表标题
javascript、jquery、html、css
你好，我在一个网络应用上工作，关于校园里的问题。我想要显示一张表格，上面有布林报告。其中一个表格标题是"Cursos“，这是一个带有所有学校课程的下拉菜单。问题是下拉菜单的一部分(从第三个选项或课程开始)隐藏在表中，但是滚动条似乎滚动到其余的课程。我希望所有选项都出现，并且不喜欢使用滚动条滚动课程。任何想法(我是编程新手，所以我对css不是很熟悉，很抱歉，如果这是一个菜鸟问题：)(在顶部，我添加了一个问题的照片)这里是我的html：
{% extends "layout.html" %}
{% block title %}
Reportes de Victi
浏览 1提问于2019-07-17得票数 0
回答已采纳
6回答
如何使html中的下拉列表与另一个div重叠
html、css
因此，我有一个导航栏和一些项目，有一个下拉菜单，当你悬停在他们上面。在导航栏的下方，有一张幻灯片显示的图像。问题是，每当我在下拉菜单上悬停时，幻灯片显示的div就会妨碍到下拉菜单的出现。
我有ff html代码
<div class="dropdown">
<li class="dropbtn">About Us</li>
<div class="dropdown-content">
<a href="#"> Overvi
浏览 8提问于2016-10-15得票数 4
回答已采纳
2回答
下拉菜单不显示
javascript、html、css、drop-down-menu
我正在使用下拉菜单代码，如下所示。当菜单图像正常使用时，代码工作正常。但是，我希望相对地放置下拉菜单，即使浏览器窗口被调整(响应性网页设计)，也可以向右流菜单图标。因此，我将图像元素封装在div元素中，以便使用绝对属性和相对属性来定位它们。但是，一旦我将图像包装到div元素中，javascript就会以某种方式停止工作。下拉菜单的显示没有显示。
HTML
Javascript
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content
浏览 2提问于2017-04-15得票数 1
回答已采纳
1回答
如何在移动设备上关闭基于悬停的CSS下拉菜单
javascript、html、css
我正在尝试制作一个可以在台式机、平板电脑和移动设备上动态工作的网页。我在悬停选择器的基础上做了一个CSS only下拉菜单(我想这就是它的名字，我还是个新手)。它在桌面上效果很好，在移动设备上显示得很好，我的问题是，下拉菜单在没有与移动设备交互时不会隐藏起来。我知道hover不能将will翻译成移动设备，我希望通过点击下拉菜单，它会再次隐藏起来。 我试图用一个按钮和一个小javascript重新创建下拉菜单，但是尝试用css来定位元素变得一团糟。似乎css唯一的方法对于样式来说是最简单的。不过，我对涉及javascript的想法持开放态度。 另外，请原谅那些乱七八糟的css，我还没有把它清理
浏览 12提问于2019-04-17得票数 0
3回答
为什么我的下拉列表不起作用？
jquery、html、css、drop-down-menu、hover
在FCC上做投资组合页面挑战。只能使用HTML/CSS/Bootstrap/jQuery。
Problem：使用导航栏并下拉、可点击、突出显示的按钮。从W3Schools 复制的指令不起作用。
/*--Drop down buttons--*/
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color:
浏览 1提问于2017-08-18得票数 1
回答已采纳
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回答
HTML下拉菜单不显示某些容器中的下拉菜单
html、css、dropdown
我正在构建一个导航与最后的链接是一个“更多”下拉菜单。
<a href="#"><div class="indiv_nav_button"><p class="font_18 white">Children</p></div></a>
<a href="#"><div class="indiv_nav_button"><p class="font_18 whi
浏览 2提问于2022-01-14得票数 0
2回答
实现特定的下拉菜单设计
html、css
我想要实现下拉菜单。我对CSS不是很熟悉，但是我可以想出下面的代码来实现我想要的功能，而不是设计：
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #f9f9f9;
color: gray;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.
浏览 0提问于2021-01-28得票数 0
回答已采纳
3回答
在导航栏上使用HTML和CSS制作下拉菜单
javascript、html、css、drop-down-menu
我已经为下拉菜单编写了大部分HTML和CSS，但是我不能让下拉菜单垂直堆叠，它是水平显示的。我怎么才能让它垂直堆叠？
下面是HTML代码：
<!-- Buttons to navigate site -->
<div class = "navbar">
<button id = "home"><a href = "index.html">Home</a></button>
<button id = "
浏览 0提问于2020-05-13得票数 0
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
1回答
移动设备下拉菜单不会消失
html、css、drop-down-menu
我有这个下拉菜单，用于我的移动网站。问题是，在下拉菜单之外单击时，它不会消失。因此，当单击该按钮时，除了从菜单中选择其他站点之外，没有办法再次摆脱该菜单。有没有可能，当它显示时，如果你在它外面单击，它就会消失？
这是我的代码：
/* Dropdown Button */
.dropbtn {
background-color: #948a69;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <
浏览 0提问于2016-03-30得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
