如何在移动设备上关闭基于悬停的CSS下拉菜单
在移动设备上关闭基于悬停的CSS下拉菜单，可以通过以下几种方法实现：
- 使用媒体查询：通过CSS媒体查询，检测设备是否为移动设备，并为移动设备添加相应的样式，以关闭基于悬停的CSS下拉菜单。可以使用以下代码示例：
@media only screen and (max-width: 768px) {
/* 移动设备样式 */
.dropdown:hover .dropdown-content {
display: none;
}
}- 使用JavaScript：通过JavaScript检测设备类型，并在移动设备上禁用基于悬停的CSS下拉菜单。可以使用以下代码示例：
// 检测设备类型
function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
}
// 禁用基于悬停的CSS下拉菜单
if (isMobileDevice()) {
var dropdowns = document.getElementsByClassName("dropdown");
for (var i = 0; i < dropdowns.length; i++) {
dropdowns[i].addEventListener("mouseover", function() {
this.getElementsByClassName("dropdown-content")[0].style.display = "none";
});
}
}- 使用触摸事件：通过监听触摸事件，当用户触摸下拉菜单时关闭基于悬停的CSS下拉菜单。可以使用以下代码示例：
var dropdowns = document.getElementsByClassName("dropdown");
for (var i = 0; i < dropdowns.length; i++) {
dropdowns[i].addEventListener("touchstart", function() {
this.getElementsByClassName("dropdown-content")[0].style.display = "none";
});
}以上是三种常见的方法来关闭基于悬停的CSS下拉菜单，具体选择哪种方法取决于你的项目需求和技术栈。对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，建议参考腾讯云的官方文档和开发者社区，以获取更多相关信息。
相关·内容
1回答
无法让javascript下拉列表工作
javascript、jquery、html、css、drop-down-menu
我有Javascript菜单。悬停并单击主菜单项工作，但是，我不能让下拉菜单工作。
menu.js是
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
//document.getElementById("myDropdown").classList.toggle("show");
//document.getElementsByClassName
浏览 2提问于2016-11-19得票数 0
回答已采纳
1回答
下拉函数
javascript、html、css
有办法进一步简化这个JavaScript函数吗？只为下拉菜单输入4个变量似乎有点荒谬，而且当我想拥有多于一个按钮时，很难跟踪这些变量。
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
}
.drop
浏览 0提问于2016-01-07得票数 4
3回答
如何将一个函数称为多重倍？
javascript、html、function
我开始进入JavaScript，我对它还是很陌生的。
我有一个功能，我想在我的网站的不同部分多次调用。在这种情况下，它是一个下拉菜单。
我有多个按钮，所有的下拉菜单都包含不同的信息。每次单击其中一个按钮时，我希望它调用JavaScript代码来实现下拉菜单，然后显示各个按钮信息，除非单击了多个下拉菜单，其中将显示多个下拉菜单。
我已经能够这样做了，但是我的代码看起来效率很低。有什么更好的、更简单的方法来做到这一点呢？
谢谢你在先进的帮助！
这里是我的JavaScript，CSS & HTML代码
function DropDownMenu() {
document.getEle
浏览 12提问于2022-03-26得票数 0
2回答
等同于事件目标匹配的角度
angular、typescript、drop-down-menu、dom-events
我正在尝试将下拉菜单从Javascript转移到Typescript，以便在我的Angular项目中使用。但是，我不知道如何模拟event.target.matches，这给我带来了一些问题。有没有易于实现的Typescript等价物？
下面是组件代码：
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./
浏览 36提问于2018-06-10得票数 0
2回答
在div之外单击无法关闭iphone中的切换栏菜单
javascript、jquery、html、css
我写了关闭菜单的代码，当在移动devices.It上点击目录外时，它在安卓手机上是有效的，但它在IOS设备上不起作用。 如果我点击切换条，下拉菜单将被打开，如果我点击菜单或菜单之外的div菜单应该是closed.It工作良好的安卓获得问题在IOS设备。 这是我添加的javascript代码。 window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClass
浏览 18提问于2018-12-27得票数 0
回答已采纳
5回答
HTML下拉列表不能正常工作
javascript、html、css
我有一个下拉菜单不能正常工作。当我单击其中一个按钮时，会出现一个下拉菜单。但是当我再次单击按钮时，它应该会关闭，但它不会关闭。我知道它与closeAll函数有关，但是当第一个下拉菜单已经打开时，我仍然需要该函数来关闭另一个下拉菜单。
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
closeAll();
document.getElementById(&#
浏览 9提问于2017-06-01得票数 1
回答已采纳
1回答
我的导航栏中有两个下拉菜单，如果其中一个是打开的，那么打开另一个也不会关闭
javascript、html、css
基本上，我的导航栏中有两个下拉菜单，如果我打开一个，然后单击它关闭的任何位置(这很好)，但如果我打开一个，然后尝试打开下一个，第一个保持打开，它们重叠。
我应该为每个菜单执行两种不同类型的javascript，还是应该重新执行整个javascript。我简直说不出话来。
任何帮助都将不胜感激！
我的代码...
function myFunction() {
"use strict";
document.getElementById("myDropdown").classList.toggle("show");
}
window.o
浏览 2提问于2017-09-29得票数 0
1回答
单击时未显示下拉菜单
javascript、html、css
我正在尝试添加一个下拉菜单，这样当页面在移动设备上查看时，用户可以点击并访问所有可用的页面。我没有得到任何类型的错误代码，只是没有响应。下面是应该影响代码的HTML、CSS和JavaScript代码片段。感谢您抽出时间通读这篇文章。 /*When user clicks name on shows dropdown menu allowing for nav on smaller viewports */
function dropDown() {
document.getElementById("dropNav").classList.toggle("sho
浏览 20提问于2021-05-06得票数 0
4回答
无法找到javascript代码不能工作的原因
javascript
我的页面上有两个JS代码：
使用以下脚本的小下拉菜单：
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdow
浏览 3提问于2016-08-04得票数 0
回答已采纳
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
回答已采纳
2回答
移动下拉菜单不会关闭javascript
javascript、html、css、magento
我试图在我的移动网站上有一个汉堡包菜单。
当在移动设备上查看时，菜单会在单击时打开，但一旦菜单打开，则不会在单击时折叠。-THIS是我的问题
这是我的问题的基本HTML。
我正在使用magento 1.9.2.3
php代码是"toplinks“。这些人不需要为解决这个问题而努力。
HTML
<div class="mobile-links">
<div id="dropdown" onClick="myFunction()">
<button class="drop
浏览 5提问于2017-02-09得票数 0
回答已采纳
2回答
使用Javascript解决方案的下拉列表
javascript、jquery
你好，我有一个问题，当我使用两个下拉菜单时，当你点击一个时，两个都被打开了，下面是我的代码： function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClas
浏览 7提问于2021-04-27得票数 0
回答已采纳
2回答
单击图标(HTML)后没有显示下拉菜单
javascript、html、css
我在标题中做了一个下拉菜单，当我点击月亮图标(右上)时，下拉列表没有显示，但是当我点击图标时函数就会被调用。我试过使用按钮，但点击图标不起作用。有人帮我吗？我是新来的谢谢。
Html：
<li>
<div class="dropdown">
<script src="./assets/js/Dropdown.js"></script>
<i class="fa-solid fa-bolt fa-lg" class="dropbtn" on
浏览 6提问于2022-07-20得票数 0
回答已采纳
1回答
下拉列表不使用id=“？php $post->ID ?>”
javascript、drop-down-menu
我的下拉菜单不起作用了，有人能发现问题并提出解决办法吗？
<div><ul><li><p class="more-info">
<a onclick="myFunction()" class="dropbtn">Dropdown</a></ul></li>
<div id="<?php echo $post->ID ?>" class="dropdown-content">
<?php
浏览 4提问于2017-07-04得票数 0
回答已采纳
2回答
多个javascript文件在sinlge页面中无法工作。
javascript、html
正如您在我的index.html页面中所看到的，我在一个页面中添加了两个javascript文件，一个用于下拉菜单，另一个用于readmore选项。
"index.html"
<!DOCTYPE html>
<html>
<head>
<title>united</title>
<link rel="stylesheet" href="/static/css/dps.css"/>
</head>
浏览 3提问于2022-12-02得票数 -1
3回答
在不同的按钮上打开不同的下拉内容
html、css、button、dropdown
我有个掉落，看起来像这样
现在，当我单击Add设备时，所有操作都很好，但是当我单击已部署的设备时，添加设备的下拉列表就会下降。
基本上，当我单击已部署的设备时，会发生这种情况。
我做错了什么吗？
这是我的css：
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hov
浏览 9提问于2017-10-03得票数 0
回答已采纳
1回答
如何使用子链接创建可单击列表？
javascript、jquery、html、css
我正在尝试制作一个可点击的菜单，并尝试使用javascript和css使其切换，但是我想让每个菜单也有一个子菜单也可以切换，而我试图主要使用javascript来实现它，我怎么做呢？
这是我的代码：
HTML：
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">|||</button>
<div id="myDropdown" class="dropdown-content&#
浏览 6提问于2016-02-25得票数 1
回答已采纳
1回答
物化-下拉菜单不显示
html、dropdown、materialize
我正在尝试构建一个web应用程序。我是HTML的新手，主要是从视频教程和其他来源复制粘贴内容。当鼠标悬停或点击时，下拉菜单不会下拉。我不太确定代码流程和javascript是如何适应的，所以我不确定从哪里开始解决这个问题。如有任何帮助，我们不胜感激！ <head>
{% load static %}
<link href="{% static 'tinymce/css/prism.css' %}" rel = "stylesheet">
<!-- Compiled and minified
浏览 24提问于2020-07-09得票数 0
回答已采纳
1回答
样式设置下拉菜单
javascript、html、css
我是css、html和js的新手。我的问题是，下拉菜单就像是窗口的一半，我不知道如何定位下拉菜单。我试过的所有方法都不起作用。我的下拉菜单的第二个问题是，只有当我单击按钮的某个部分时，下拉菜单才会真正出现。你们能帮帮我吗？这是我的代码：
window.onclick = function(event) {
if (!event.target.matches('.dropdiv')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
浏览 0提问于2016-09-02得票数 0
1回答
动态更改子菜单的标题
javascript、html、drop-down-menu、dropdown、submenu
我想创建一个类别的下拉菜单。当页面第一次加载时，我希望下拉菜单显示“类别”。我希望能够点击像"Tops“这样的类别。然后下拉菜单的标题将变为"Tops“而不是”categories“。我真的不知道如何开始，我在编码方面是个新手。我在W3上找到了一些代码作为我的基准。 <button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content&
浏览 23提问于2020-01-08得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
