开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

display设置为none后，下拉菜单不会关闭

。display属性是CSS中用来控制元素的显示方式的属性之一。当将元素的display属性设置为none时，该元素会被隐藏，不占据页面空间，并且不会响应用户的交互事件。

下拉菜单通常是通过使用HTML和CSS来实现的。一般情况下，下拉菜单是通过设置一个包含菜单选项的容器元素，并使用CSS的display属性来控制菜单的显示和隐藏。

当将下拉菜单的容器元素的display属性设置为none时，菜单将被隐藏，但是菜单的状态仍然保持打开，因此点击菜单按钮或者其他触发菜单显示的元素时，菜单不会关闭。

要解决这个问题，可以通过以下几种方式来实现：

使用JavaScript：可以通过JavaScript来监听菜单按钮的点击事件，并在点击时切换菜单的显示状态。当点击菜单按钮时，如果菜单是显示的，则将菜单的display属性设置为none，如果菜单是隐藏的，则将菜单的display属性设置为block或其他适当的值。
使用CSS的:hover伪类：可以使用CSS的:hover伪类来实现鼠标悬停时显示菜单的效果。通过将下拉菜单的容器元素的display属性设置为none，并使用:hover伪类来控制菜单的显示和隐藏。当鼠标悬停在菜单按钮或其他触发菜单显示的元素上时，将菜单的display属性设置为block或其他适当的值，当鼠标离开时，将菜单的display属性设置为none。
使用CSS的transition属性：可以使用CSS的transition属性来实现平滑的菜单显示和隐藏效果。通过将下拉菜单的容器元素的display属性设置为none，并使用transition属性来控制菜单的显示和隐藏的过渡效果。当需要显示菜单时，将菜单的display属性设置为block或其他适当的值，同时使用CSS的opacity属性来控制菜单的透明度，从而实现平滑的过渡效果。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网平台（IoT Hub）：https://cloud.tencent.com/product/iothub
腾讯云移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/product/mu

相关搜索:打印div最初设置为display:none;如何在5秒后将"display:none“设置为之前在JavaScript中设置的"display:initial”？当display属性设置为none时删除边框为什么在sx属性中将display设置为none不会隐藏MUI组件？将元素的display设置为none后，即使它在代码中发生了更改，也无法重新显示元素显示后，自动完成不会在div的具有display:none属性的子元素上触发当Display从None设置为Block时，Div中的所有元素不显示设置值后，Safari中的Select不会自动关闭 Kivy & pyvisa -如何在GPIB连接后将ObjectProperty设置为None？sql alchemy在提交后将外键字段设置为None 将其设置为某个值后，CALayer边界不会更改关闭其inputAccessoryView设置为toolbarItems的键盘后，toolbarItems消失 div元素在将宽度设置为0后不会折叠？当包含为asp文件时，引导下拉菜单将会展开，但不会关闭在显示isModalInPresentation设置为true的页面工作表后，无法正常关闭弹出窗口尽管v-model变量设置为false，但Vuetify: v-对话框不会关闭即使为MERN堆栈web应用程序设置了sameSite:'none‘和secure: true，Cookie也不会保存在chrome中 Scrapy爬行器在将'start_urls‘变量设置为变量后不会产生提要输出在anglar应用程序中，当父div设置为隐藏单击事件后，列表项单击事件不会触发

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS笔记

用于把所有用于列表的属性设置于一个声明中 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。...:none 隐藏的元素不会占用任何空间 visibility:hidden 隐藏的元素仍需占用与未隐藏之前一样的空间定位 postion: absolute(绝对定位)，其位置相对于最近已定位的父元素...即使窗口是滚动的它也不会移动。...内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。...> 下拉菜单 鼠标移动到按钮上打开下拉菜单。

1.9K2 0

巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义。...当你触发下拉菜单后，有时候需要做关闭（返回原状）的动作，而从具体情况（比如说如本实例触发菜单后菜单将原来的开关都掩盖了）或者用户体验上考虑，最好是除菜单区域外的整个屏幕都随便盲点就能关闭菜单。...这个a标签就是实现在打开开关后产生一个透明的遮罩层覆盖到屏幕上。...: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0...: block; } } 稍微解释下上面的SASS代码：默认的情况下是隐藏下拉菜单（采用透明属性opacity 与CSS3的transform的scale 缩小至0，遮罩层则默认隐藏）；当开关触发后透明度变为

3.9K8 0

html导航栏可以展开的下拉菜单,html导航栏下拉菜单如何制作

html导航栏下拉菜单如何制作发布时间：2020-09-26 15:29:13 来源：亿速云阅读：88 作者：小新小编给大家分享一下html导航栏下拉菜单如何制作，希望大家阅读完这篇文章后大所收获...我们要说的是html导航栏下拉菜单的制作，先看一个完整的实例代码： .dropdown { position: relative; display: inline-block; } .dropdown-content...{ display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px....dropdown-content类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意min-width的值设置为160px。你可以随意修改它。...注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置width为100%(overflow:auto设置可以在小尺寸屏幕上滚动)。

8.7K2 0

CSS 下拉菜单_下拉菜单html

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。基本下拉菜单 当鼠标移动到指定元素上时，会出现下拉菜单。 <!...: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color...: block; } 鼠标移动后出现下拉菜单 将鼠标移动到指定元素上就能看到下拉菜单。...; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display...> 下拉菜单 鼠标移动到按钮上打开下拉菜单。

6.8K5 0

plotly-express-5-dash实例1

本文中介绍的是如何利用dash制作单个图形+下拉菜单，主要实现的功能：一级标题文本的居中空行实现 下拉菜单的多个参数设置将透视表变成DF数据框导入库和包 import pandas as pd...dash_html_components as html from dash.dependencies import Input, Output 显示 # 显示所有列 pd.set_option('display.max_columns...', None) #显示所有行 # pd.set_option('display.max_rows', None) #设置value的显示长度为100，默认为50 # pd.set_option('...max_colwidth',100) 数据数据是网上下载的，导入之后具体的形式为： ?...透视求平均后的结果： ? 将透视表中的数据变成数据框的形式，很巧妙的做法： ?

1.3K2 0

CSS——06扩展：高级

元素的显示与隐藏目的让一个元素在页面中消失或者显示出来场景类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！...1.1 display 显示（重点）实际开发场景：配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛 1.2 visibility 可见性 (了解) 1.3 overflow...1.4 显示与隐藏总结属性区别用途 display 隐藏对象，不保留位置配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛 visibility 隐藏对象，保留位置...保证盒子里面的内容不会超出该盒子范围 2. CSS用户界面样式所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。...给img 添加 display：block; 转换为块级元素就不会存在问题了。 4. 溢出的文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式。

4.7K4 0

前端成神之路-CSS高级技巧

元素的显示与隐藏目的让一个元素在页面中消失或者显示出来场景类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！...1.1 display 显示（重点）实际开发场景：配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛 1.2 visibility 可见性 (了解) 1.3 overflow...1.4 显示与隐藏总结属性区别用途 display 隐藏对象，不保留位置配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛 visibility 隐藏对象，保留位置...给img 添加 display：block; 转换为块级元素就不会存在问题了。 ? 4. 溢出的文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式。...图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

6.8K3 0

jQuery练习——下拉菜单

这里我们先用无序列表ul、li完成页面结构，为每一个元素添加a标签，即超链接。...li { list-style-type: none; } a { text-decoration: none; } 接下来使用float将竖向一级菜单变为横向，此时文字挨得非常紧...，我们为盒模型设置宽度和高度，让文字分开。...为一级菜单的元素添加position：relative；意为相对定位，在元素原有的位置基础上，根据设置的left调整元素位置，这样做不会改变页面布局，不影响其他元素的偏移。...使用left、transform设置居中对齐，设置display：none；隐藏下拉菜单。二级菜单中的li样式和一级菜单差不多。

26.9K2 0

简单带下划线跟随效果的CSS3下拉菜单特效

这是一款使用纯CSS3制作的带下划线跟随效果的下拉菜单特效。该下拉菜单通过CSS3 transform和transition来制作下划线跟随效果和下拉菜单效果。...简要教程 HTML结构该下拉菜单使用元素来包裹一个无序列表。...display显示为内联块级元素。菜单项通过padding来设置尺寸，并设置最小宽度min-width为120像素。...: uppercase; display: inline-block; padding: 0; margin: 50px auto; } #main li { font-size: 0.8rem; display...然后将该菜单项中的子菜单的Y轴位置恢复为0，显示下拉菜单，同时根据不同的菜单项来设置translate函数的X方向移动值来移动下划线。

1.9K2 0

CSS 下拉菜单与 focus

相较于 hover 是悬停、focus 是获得焦点，active 是「正在交互」——从按下鼠标左键（主要按键）到松开、或者是从触摸到松开，一松开便解除 active 状态，而下拉菜单显然是要按下后保持住展开状态的....dropdown-menus { display: none; } .dropdown-icon:focus + .dropdown-menus { display: block; } 一运行测试...首先，第一个坑——iOS Sasfari 浏览器中点击与 button 的时候是不会有 :focus 状态的，倒是原本在 PC 上表示悬停的 :hover 可以在点击（触摸）后被激活。...若希望在点击后保持 :focus 状态，则需要额外声明 tabindex 参数（不论是否有 href 参数）。碰巧的是，前面我们刚好设置了 tabindex，这个坑算是无意间跳过去了。...至于如何修复，方才说到只要让其它元素聚焦就可以顶替掉这个聚焦的元素使其失焦，那么我们只需要让一个层级足够高的元素可以被聚焦——设置 tabindex 参数（最好为 -1，原因自己往上翻）。

5.5K2 0

前端入门学习--CSS

隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。... display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。...: block; } 鼠标移动后出现下拉菜单 将鼠标移动到指定元素上就能看到下拉菜单。...: 12px 16px; text-decoration: none; display: block; } /* 鼠标移上去后修改下拉菜单链接颜色 */ .dropdown-content...a:hover {background-color: #f1f1f1} /* 在鼠标移上去后显示下拉菜单 */ .dropdown:hover .dropdown-content { display

27.7K2 0

利用纯CSS实现手机下拉菜单效果

今天在改一个响应式网站，兼容手机时需要写一个下拉菜单。其实用纯 CSS 就能实现，利用 checkbox 的 checked 属性，设置菜单的显示隐藏。...CSS： #menu-toggle{ position: absolute; top: 10px; right: 20px; } #menu-check ~ ul{ display...: none; } #menu-check:checked ~ ul{ display: block; } ul{ list-style: none; } li{ line-height...: 36px; } label 绑定 input ，通过判断 checkbox 的 checked 属性，给他的兄弟元素设置 display 属性。...然后将 input 标签隐藏就可以了： #menu-check{ display: none; } 声明：本文由w3h5原创，转载请注明出处：《利用纯CSS实现手机下拉菜单效果》 https:/

2.6K1 0

Bootstrap学习笔记上（带源码）

bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。...multiple属性的值为multiple <select multiple class="form-control"...; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none...;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/ left: 0; z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/ display...: none;/*默认隐藏下拉菜单项*/ float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size

3.8K2 0

纯HTML CSS制作导航栏下拉菜单

/* 去除页面边距 */ padding: 0; margin: 0; } body{ /* 设置页面背景颜色...; /* 下拉菜单大小 */ width: 170px; height: 60px; /* 去浮动，使li...: none; } /* 显示 */ .nav li:hover ul li{ display: block;.../* 去除页面边距 */ padding: 0; margin: 0; } body{ /* 设置页面背景颜色...: none; } /* 显示 */ .nav li:hover ul li{ display: block;

6.3K4 0

使用 HTML、CSS 和 JavaScript 创建下拉菜单

主要亮点：HTML结构：我们将使用HTML为我们的项目打下基础，构建导航栏和下拉菜单组件的结构。CSS样式：通过CSS，我们将为下拉菜单添加样式，确保它在任何屏幕上都看起来精美、专业。...下拉菜单 HTML 代码：<!...submenu{ position: absolute; left:0; background: #101d23; display:none; transition: all...{ display: none; /* Initially hide the toggle button */ z-index:1000;}.icon { position: relative...:none; } .menu.active{ display:initial } .menu li{ width:100%; border-top

5121 0

JavaScript---网络编程(11)--DHTML技术演示(4)-单选框下拉菜单添加文件

list-style:none;//前面的默认小圆点取消 margin:0px;//外补丁 } ul li{/*设置ul中的li的字体颜色*/...color:#ff0000; } .close{ display:none; } .open...="block"; }else{ oDivNode.style.display="none";...="block"; }else{ display="none"; } }...3--直接给oSubSelNode.options.length或oSubSelNode.length赋值 oSubSelNode.options.length=1; //长度设置为

1.3K2 0

html二级菜单:DIV+CSS制作二级菜单（横排二级下拉菜单）以及二级菜单出现错位怎么解决「建议收藏」

html二级菜单制作（横排二级下拉菜单）以及二级菜单出现错位怎么解决摘要：DIV+CSS制作二级菜单（横排二级下拉菜单）以及二级菜单出现错位怎么解决（解决办法放在代码下面） 1.先看一下最终的效果图...30px; font-size: 20px; text-align: center; font-family: 宋体； line-height: 25px; /*将元素显示为块级元素...:none;用来隐藏二级菜单 */ ul li ul{ position: absolute; display:none; } /*float:none;使二级菜单不左右浮动也是默认值...错位原因：再css样式里即内没有添加去掉网页原有属性的代码（* { margin:0; padding:0;}），接下来我把源代码里的 * { margin:0; padding:0;}注释掉来看看网页打开后的效果图...：block;”设置成块，再给他们加上边框； 2.然后通过“float：left；”控制浮动，这样横向排列的一级菜单就好了；一些细节方面比如一级菜单的边框颜色、像素大小、背景色文字在框里的位置都得设置好

5.5K1 0

前端jQuery炫酷效果

10px; } .atalk{ margin:10px; } .atalk span{ display...获取用户输入的数据 -- value属性值访问 2、看下拉菜单的选项如果是a -- 获取下拉菜单的vlaue == 0，把用户的数据按照a的模板展示；如果是b --获取下拉菜单的vlaue == 1，...vlaue属性为空 $('#talkwords').val('') }) }) <div...} } // 验证注册 // 考虑的人：页面一刷新，没有执行失去焦点，正则没有生效 -- 不能注册不能提交 // 方法：页面定义开关，默认不能提交，让开关关闭表示不能提交...此处为js文件，由于字数限制，此处只提供重要功能的代码。

3.9K3 0

Bootstrap基础学习笔记

【文字常用样式】 .display-{1到4} 标题类，显示更大的字号，值为1-4，display-1字号最大。 .small 更小、颜色更浅的字号。...】 .alert 基类 .alert-{success、info、warning、danger、primary、secondary、light、dark} 各种类型的配色样式 .fade、.show 设置提示框在关闭时的淡出和淡入效果...下拉菜单容器右对齐。...默认是左对齐 .dropdown-header 下拉菜单标题 .dropdown-item 下拉菜单列表项目 .dropdown-divider 在下拉菜单中创建一个水平的分割线 .active 启用指定下拉菜单列表项目....disabled 禁用指定下拉菜单列表项目【徽章】 .badge 基类，默认样式为四角圆角6像素 .badge-pill 药丸形状徽章 .bg-{primary | secondary | info

4.9K3 1

JavaScript学习笔记（一）

onclick="noCheck();"> 4、设置下拉菜单...该表单必须由两个标签组成，即select和option select表示下拉菜单 option表示菜单中的选项常见的属性 value：指定下拉菜单选项的value值 type：指定下拉菜单的类型是单选还是多选...text：指定下拉菜单选项的文本值 select：声明是否被选中 options：选项数组 a、单选下拉菜单 例子 form { padding: 0px...document.write() document.writeln() 在新窗口中输出数据使用 document.open()与document.close()方法可以在打开的窗口中输入内容,一个是打开一个是关闭...= 'ren' }else{ tp.style.display = 'none'; prevnode(target.parentNode.previousSibling

3.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭