如何根据设备创建响应单击或悬停菜单？
根据设备创建响应单击或悬停菜单可以通过以下方式实现：
- 使用CSS媒体查询：通过CSS媒体查询可以根据设备的屏幕宽度或其他特征来应用不同的样式。可以使用媒体查询来隐藏或显示菜单，或者改变菜单的布局和样式。例如，可以在较小的屏幕上使用折叠菜单，而在较大的屏幕上显示完整的菜单。
- 使用JavaScript事件监听：可以使用JavaScript来监听设备的点击或悬停事件，并根据事件触发来显示或隐藏菜单。例如，可以使用JavaScript的click事件监听器来在移动设备上处理点击事件，使用mouseover和mouseout事件监听器来在桌面设备上处理悬停事件。
- 使用响应式框架：响应式框架如Bootstrap、Foundation等提供了一套已经封装好的响应式菜单组件，可以根据设备的屏幕大小自动调整菜单的样式和布局。这些框架通常提供了文档和示例代码，可以根据需要进行定制和使用。
- 使用CSS伪类和动画效果：可以使用CSS伪类和动画效果来创建响应式菜单。例如，可以使用:hover伪类来在桌面设备上实现悬停效果，使用:checked伪类来在移动设备上实现点击效果。同时，可以使用CSS过渡或动画效果来实现平滑的菜单切换效果。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云移动开发平台：https://cloud.tencent.com/product/mpp
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云视频处理（VOD）：https://cloud.tencent.com/product/vod
相关·内容
1回答
移动设备上的下拉导航
、、、
我的公司使用专有的CMS开发网站，我们适应移动开发的能力相当差。我们开发专门针对手机的网站，但我们不会免费提供这些网站。无论如何，我们的大多数网站都使用无序列表的水平导航，当父项目悬停在上面时，子菜单就会出现。这在桌面设备上可以，但在移动浏览器上就不起作用了。子菜单出现了，但它们的功能就像它们是透明的一样，单击子项时不会出现任何地方，或者更糟糕的是，会转到子菜单后面的链接。
我能够编写一个简短的jQuery脚本(我是jQuery的初学者)，它强制在单击父链接时使子菜单保持可见。它可以工作，但不是在第一次单击时-第一次单击时，浏览器会尝试启动移动悬停模拟(?)并在屏幕上闪现该子菜单一瞬间。然后，
浏览 3提问于2013-05-22得票数 0
回答已采纳
3回答
我正在创建一个带有的按钮，我想要的是当我在移动设备上时，我可以点击按钮，菜单就会出现。我们知道，我们不能在移动设备上悬停，但在标签和更高版本的设备上，菜单应该在悬停时显示，而不是在点击时显示。codepen如果我在移动设备上使用onclick，那么菜单停留在中等及以上的设备上，如果我移除onclick以在中等及以上的设备上正常工作，那么在移动设备上我们就不能点击，因为打开菜单的唯一选项是悬停，这在移动设备中是做不到的。如何解决这个问题。唯一的目标是做出响应式的设计。 const btn = document.querySelector('.btn');
const lis
浏览 22提问于2021-01-22得票数 1
回答已采纳
1回答
我正在做一个响应的网页设计和我的导航菜单有:悬停链接。我已经在台式机、平板电脑、galaxy s3 (移动)和iPhone (移动)上测试过它们，它似乎没有任何问题。单击链接后，菜单将显示为单击事件。这是我希望它工作的方式，也是我希望它工作的方式。
我遇到了许多关于如何不使用:悬停的文章，他们大多要求使用:焦点和:active，以及当使用:悬停时。
因此，问题是，我真的需要添加:focus和:active (只要a :hover在适当的位置)，以便在所有的平板和移动设备上工作吗？我还没有上传的网站，因为我想确保它是伟大的工作之前，我上传。
感谢您的阅读。
浏览 4提问于2014-07-11得票数 0
回答已采纳
2回答
我有一个简单的jQuery下拉菜单，没有任何问题。我遇到的问题是我的响应式设计，它仍然保持着在移动设备上不能正常工作的悬停效果。一旦汉堡包图标.menu被点击，有什么办法取消悬停吗？这个想法是让.subNav在移动设备上隐藏起来，一旦用户点击了.topNav li a，.sabNav就会滑下来。我不能把响应式设计放在小提琴上，但你大概可以对它的功能有一个很好的了解。
浏览 1提问于2014-04-25得票数 0
我经常遇到这样的情况，我需要在悬停时显示菜单，而对于移动设备，菜单应该在单击时打开。现在，例如，考虑以下示例：
.btn {
width: 200px;
background-color: #333;
color: white;
padding: 10px;
}
.menu {
display: none;
padding: 15px;
}
.btn:hover .menu {
display: block;
}
.btn:focus .menu {
display: block;
}
<div class="btn">
Bu
浏览 0提问于2016-12-23得票数 6
1回答
嗨，我的网站有一个在桌面上完美工作的主导航菜单。鼠标悬停将打开下拉菜单，父菜单项也是可点击的链接(而不是'#')。
问题出在移动和触摸设备上。由于这些设备没有‘悬停’，当我点击一个父类别时，我会被直接带到链接。如何才能在第一次单击时打开下拉列表，并使父菜单链接在第二次单击时仍然有效？
我是否应该将下拉菜单设置从“悬停时打开”切换为“单击”，然后使用css和jquery在非触摸设备(即桌面)上启用悬停？
我是一个完全的网页设计新手。我花了很多时间研究jquery和css代码，并尝试了关于这个问题的十几种不同的方法。似乎没有真正可靠的解决方案来解决这个问题，这导致了客户在移动平台上
浏览 0提问于2015-07-16得票数 0
我们已经将twitter bootstrap下拉菜单设置为悬停(而不是单击yes，我们知道触摸设备上没有悬停)。但我们希望当我们点击它时，主链接能够工作。
默认情况下，twitter bootstrap会阻止它，那么我们如何重新启用它？
浏览 3提问于2012-09-28得票数 68
回答已采纳
如何在codeIgniter中创建活动菜单，它不是在悬停时，而是在单击时，例如，如果我们在某个类别中，菜单中的项目被突出显示，如何在CI中完成此操作？
浏览 0提问于2012-05-08得票数 0
回答已采纳
我很喜欢在bootstrap项目中使用zurb foundation导航菜单，但我不确定如何或是否可以集成zurb foundation菜单，例如，在bootstrap 2.3 中的示例中的一个显示
我面临着一些像悬停效果这样的引导菜单问题，即使在实现了几种不同的方法后，我仍然对引导菜单不满意，因为我在桌面和移动设备上都能有效地使用悬停和单击事件。
我在之后设置的示例显示了我在移动设备上面临的一个问题。你可以自己试一试
到目前为止，我已经看到鼠标悬停和单击事件在桌面和移动设备上都能非常顺利地工作。
我希望在这方面的帮助，以便我可以集成只有zurb基金会导航菜单在bootstrap项目
除了ap
浏览 0提问于2013-08-24得票数 0
我需要一个菜单，当我悬停在div上时，当窗口宽度超过768px时，菜单也会打开，当我单击窗口宽度低于768px时，菜单也会打开(这个跨度隐藏在移动设备上)。我一直有问题，点击，或悬停，之间的两个屏幕尺寸(0-768px和769以上)。
下面是我使用的jQuery：
function subNavDropdowns(width){
if (width <= 767) {
$('span').click(function(e) {
$(this).parent().siblings().children('ul').rem
浏览 1提问于2016-05-04得票数 0
1回答
我对网络开发很陌生，现在我面临着处理像ipad这样的设备悬停的问题。首先，我想删除hover的css，并点击它，但是，客户坚持有悬停。
这里的问题是，我有引导导航栏和几个菜单下拉悬停。但在ipad上，菜单在点击菜单(例如:学习)后会下降，但直到我点击另一个导航菜单时才会消失，比如“教学”。
我想使用javascript/jquery执行以下操作。
保持台式机和膝上型计算机上现有的悬停行为
在像iPad这样的设备上，我希望菜单在以下情况下消失
(a)再次单击同一菜单项时
(b)单击子菜单时
(c)在菜单外单击时
这里的任何帮助都是非常感谢的。
这是小提琴
浏览 2提问于2015-01-22得票数 2
2回答
我环顾四周，但没有找到一个似乎是常见问题的答案。
我有一个基本的下拉菜单，它是在悬停时激活的(使用悬停的jQuery插件)。它对桌面浏览器很好，但是对于那些不像iPad那样将悬停事件转换为单击的移动设备，它不起作用。以下是现在的Javascript：
$('li.threecolumns, li.twocolumns, li.onecolumn').hoverIntent(
function() {
$(this).children('div').fadeToggle(fadeInSpeed);
},
function() {
$(t
浏览 5提问于2012-08-09得票数 3
回答已采纳
1回答
移动触摸菜单
、、、
我想做一个菜单项：
显示一个下拉子菜单，当项目是悬停(使用鼠标)或触摸(使用触摸屏)。
允许您单击子菜单中的链接，而子菜单是可见的。
关闭子菜单(不单击链接)，如果您将鼠标移到子菜单外(使用鼠标)或触摸子菜单之外的任何位置(使用触摸屏)。
下面是我的HTML片段(包含在HTML5 <body>元素中)：
<div class="menuitem">
Drop-down menu item
<br />
<ul class="submenu">
<li><a
浏览 0提问于2014-07-06得票数 12
3回答
我创建了一个响应网站，在所有设备上都运行良好，但平板电脑布局有一个问题:事件"a.hover“在点击前调用消息框，平板电脑不使用悬停效果，就像”单击“。因此，使用平板电脑的每个人都需要点击2次(一个用于悬停，另一个用于单击)。
我想转换事件"a.hover“在一次点击，是可能的吗？
解决办法：
.ads_box:hover{ display:none;}
不是我所期望的，而是一个解决办法！
浏览 3提问于2014-10-07得票数 1
回答已采纳
1回答
我在手机上优化一个网站，我做了一个弹出菜单。我禁用了改变菜单按钮的颜色:悬停。我这样做是因为iPhone认为最后一次单击是为了保持悬停伪类。
然而，现在我在黑莓上测试，他们有一个桌面风格的光标，因此将受益于鼠标悬停时改变颜色的元素。
是否可以禁用iPhones而不是黑莓的悬停颜色？更普遍的是，有没有一种方法只对黑莓这样的非触摸屏设备具有悬停颜色，因为只有它们才能真正的鼠标悬停。谢谢
浏览 0提问于2011-10-28得票数 1
回答已采纳
2回答
我有一个带有下拉菜单的导航，在计算机浏览器上，它在悬停时出现(CSS3/jQuery的效果)，当悬停出来时，它就消失了。但是，它还会检测用户是否在使用iPad/iPhone，如果是，则仅在用户单击菜单项时显示下拉菜单。假设我有一个“服务”导航菜单，在电脑上，“服务”的子菜单会在鼠标悬停时出现，而在移动设备上，点击就会出现。
虽然在移动设备上，菜单不会关闭，除非用户单击页面上的另一个菜单项/链接。我希望当用户单击页面上的其他地方时，或者更好的是，当他向下滚动页面时，菜单会消失。(如果有更好的方法，请告诉我)
所以，是的，这是我的实际代码(用于手机)
$("#generale > l
浏览 3提问于2012-06-08得票数 2
回答已采纳
我正在使用WordPress (外观>菜单)功能来创建自定义导航菜单。我创建了一个具有下拉菜单的菜单项，并希望通过单击而不是鼠标悬停来激活下拉菜单。我该怎么做呢？我很熟悉jQuery，我只是不知道如何消除当前的悬停状态。
浏览 0提问于2011-09-21得票数 1
回答已采纳
1回答
我正在构建一个响应性的导航，刚刚遇到了一个问题。导航的本质是让它响应，所以你点击一个‘三行’按钮，菜单弹出页面。该菜单支持嵌套菜单，因此在菜单中，您也可以单击一个框(右边)打开嵌套菜单。现在，我的问题是，我只想打开导航点击，而不是悬停。
实质上：
主导航(桌面)：悬停打开孩子
当在一定宽度下(媒体查询)隐藏它以显示要单击的黑匣子，您可以单击下一个框来打开
一切正常，但是打开桌面导航的悬停事件显然是在响应视图中触发要打开的导航。我怎么才能阻止这一切？
这是导航的JSFiddle，请单击黑匣子：
浏览 0提问于2013-03-24得票数 0
回答已采纳
1回答
在触摸屏上处理Hover事件
、、、、
我设计的一个网站使用的导航菜单显示子菜单上:悬停。最初的站点没有使用任何响应性的设计:它只针对桌面环境。我现在正在使用响应设计技术来瞄准移动设备和平板电脑，其中许多是基于触摸的，而不是基于鼠标的。
我面临的最大问题(许多其他人似乎也遇到过)是基于鼠标悬停的导航菜单:它在鼠标环境中工作得很好，但是在触摸设备上，没有可靠的方法触发悬停，这使得页面很难使用。
目标是：
当菜单被鼠标悬停时，显示子菜单.
当使用鼠标单击菜单时，打开锚标记的链接。
当第一次通过触摸点击菜单时，显示子菜单。
第二次通过触摸点击菜单时，打开锚标签的链接。
连接鼠标设备的平板电脑可以无缝切换功能。
浏览 2提问于2013-12-28得票数 15
回答已采纳
我正在使用Angular 9，我如何管理打开菜单，单击移动和悬停桌面？
例如，如果我有一个项目列表，我想要在桌面大小时用鼠标悬停打开菜单，这是我用' hover‘管理的，但当我有移动设备时，我想用点击打开菜单，考虑到我有多个按钮，所以我不想有两个不同的按钮来管理操作
浏览 3提问于2020-03-06得票数 0
1回答
关于如何重置/清除在触摸屏设备(如ipad )中激活的悬停状态的任何建议。
我有一些在悬停时显示的工具提示，这实际上是ipad中的一个点击，因为它是如何处理悬停的。
但是，有没有一种方法可以设置它，以便将悬停状态重置为正常。因为问题是工具提示不会重新显示，因为它仍然认为它被悬停。单击另一个工具提示，然后返回到该工具提示。
编辑:演示问题的非常基本的JSfiddle，需要在ios设备中查看才能看到问题。
悬停(在ipdad中单击)该框将出现，然后消失。再次尝试悬停/单击，它将不会重新出现在触摸设备中，除非您随后悬停/单击另一个工具提示，然后返回到那个工具提示。
浏览 0提问于2012-11-20得票数 2
回答已采纳
关于如何将Twitter Bootstrap的下拉列表从单击显示为悬停显示，似乎有很多问题/答案。Bootstrap的建造者有一个很好的理由使用点击而不是悬停--悬停在大多数平板电脑和手机上都不起作用。然而，我使用Bootstrap的原因之一是它的响应特性。我想要一个网站，可以在台式机，平板电脑和手机上查看。虽然点击获取下拉列表对于平板电脑和手机是必要的，但这不是台式机的预期行为。我希望我的网站是响应式的，但不是以必须重新培训用户为代价的！
有没有办法为桌面提供悬停下拉菜单，为平板电脑和手机提供点击下拉菜单？
浏览 4提问于2012-06-19得票数 9
2回答
我的网站使用的是纯CSS3下拉菜单。问题是，当网站在触摸屏设备上查看时，一些带有悬停属性的菜单项不会自动下拉。
我如何才能将其更改为，如果菜单项有悬停下拉菜单，在触摸屏设备中，您必须触摸它，然后菜单将下拉到我们的PC中的其他位置，它仍将保持悬停效果。
仅仅使用CSS就可以做到吗？
浏览 1提问于2013-04-22得票数 3
2回答
调整屏幕大小后不显示子菜单
、、、、
我正在尝试建立一个自定义的响应式导航，更改为100%宽度的移动下拉菜单。但是，如果我以移动设备的大小打开子菜单(小于768px)，然后突然调整窗口大小，悬停效果就不起作用，子菜单项也不会在较大的屏幕上显示。
下面是我的导航的精简版本的JSFiddle
我认为唯一可能导致问题的部分是这个javascript：
if (w > 768) {
$("#nav > li > ul").hide();
}
如果在低屏幕尺寸下单击第一个菜单项，然后调整窗口大小，当您将鼠标悬停在父项目上时，它将不会显示相同的子菜单。但是，如果你从较大的屏幕尺
浏览 1提问于2015-04-10得票数 0
我正在创建一个超大型菜单。仅当单击导航列表项时，菜单才会出现。我希望它能隐藏在鼠标上，但只在一个函数在半秒的setTimeout上运行之后。这将避免意外的鼠标退出，就像鼠标单击列表项目一样，但随后稍微从位于li中的扩展下拉超级菜单中移出。
因此，基本的问题是，如何使用jQuery来确定一个元素当前是否正在悬停？
如果它在半秒后悬停，我将保留菜单(如果用户将鼠标移出，但立即返回到li)。
如果过了半秒钟，鼠标还在外里，那就隐藏菜单。
浏览 2提问于2011-03-02得票数 1
回答已采纳
2回答
移动设备上的悬停效果
、、、
我有一个关于CSS悬停效果的问题。我使用鼠标悬停导航来激活带有display类的子菜单。在移动设备上，我有一个问题，那就是没有悬停，所以我只能点击主菜单，而看不到子菜单。有没有办法让它在移动设备上工作？
浏览 3提问于2014-08-25得票数 0
3回答
我有一个经典的css下拉菜单与css悬停选择器切换到“显示:块；
为了使用触摸设备，我添加了以下脚本：
$(document).ready(function () {
$("div.menuHead").click(function () {
//Toggle the menu but don't include it in the hide selector using .not()
$(this).siblings("div.menu").toggle();
$("div.me
浏览 2提问于2013-12-19得票数 3
1回答
我对安卓设备上的GWT引导响应NavBar有一个问题，如下所述。
我正在使用GWT引导带(版本2.2.1.0和2.3.2.0-快照)开发一个应用程序--响应性NavBar。在我的安卓设备上进行测试时，NavBar中的菜单项就会崩溃。首先，单击菜单，这些菜单项显示在屏幕上。再次单击该菜单可折叠它。正常工作。
但是，当再次单击菜单时，会出现不显示菜单项的问题。
我还试着从我的安卓设备上打开，它也有同样的问题。请看下面的截图。
-第一次点击屏幕截图：
-第三次点击屏幕截图：
这个问题在我的Nexus 4设备上，我不确定它在你的Android设备上是否工作(或不工作)。
我的问题是
浏览 1提问于2013-11-09得票数 0
4回答
我在一个响应网站上的菜单有以下问题：
我创建了一个html菜单，其中包含ul/li-structure，其中包含作为类别名称的链接。
<ul>
<li>
<a href="linkToCat">maincat1</a>
<ul>
<li>
<a href="linkToCat">subcat1.1</a>
<ul>
浏览 8提问于2017-02-06得票数 1
回答已采纳
我正在使用引导3和我有一个下拉菜单。我没有使用默认的动画，而是使用了JQuery、slideDown和slideUp。唯一的问题是，当我将鼠标悬停时，它可以正常工作，但当我单击它正确显示的菜单时，slidesDown工作，第二次单击然后slideUP工作，然后在第三次单击以检查是否将再次工作时，没有响应。我看到了许多例子和不同的方法，但我是一个新手，没有多少运气。
有效的相关守则：
$(document).ready(function () {
$('.navbar-default .navbar-nav > li.dropdown').hover(function
浏览 2提问于2014-12-05得票数 0
回答已采纳
1回答
我有一个网站，我一直在尝试将左上角的棒状汉堡菜单从悬停时打开改为有人点击时打开。原因是，在智能手机上，菜单保持打开状态，因为鼠标悬停并不支持触摸屏设备。
我尝试寻找支持悬停的css部件，但即使在禁用了顶部菜单的大多数css行之后也是如此
#top-menu-selector:hover{color:#BD2A33;-moz-box-shadow: inset 0 0 20px 0 rgba(0,0,0,0.12);-webkit-box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 12);box-shadow: inset 0 0 20px 0 rgba(0,
浏览 2提问于2016-01-04得票数 0
我有一个多层次的导航在果园CMS，其中显示的子菜单项目在悬停。当我单击时，它将打开一个内容菜单项。这在个人电脑上工作得很好，但在移动设备上就不行了。一般来说，对于移动设备或触摸设备，它应该折叠菜单，而不是跳转到另一个页面。
我正在寻找一个简单而干净的方法来解决这个问题。
是否有一种方法来创建这样的菜单项，仅作为子菜单项的开启器，而不是实际链接到页面？
一些背景信息:它实际上是一个基于twittter引导3的主题。
浏览 1提问于2014-07-02得票数 0
回答已采纳
1回答
我的正在使用来呈现菜单项。
我的菜单由多个父菜单项组成，这些菜单项也是可点击的页面，在这些父菜单项上盘旋时，应出现子菜单项。
当在我的电脑浏览器中的父菜单项上盘旋时，会出现子菜单项，这就是预期的行为。
在iPhone浏览器中，当触摸父菜单项时，会出现子菜单项，这也是首选行为。(因此，这实际上触发了悬停行为)
问题是，在Android设备上，触摸父菜单项会导致单击事件，而不是我们在iPhone中看到的悬停行为。
我看过超级JavaScript，没有看到任何特定于iPhone的逻辑。
因此，我想知道为什么iPhone中的触摸会导致悬停行为，而不是在安卓设备中。
我在这里错过了什么？
浏览 4提问于2014-07-27得票数 2
回答已采纳
我发现了一个很好的超级菜单，需要一些修改，以便它可以与ASP.Net webform应用程序一起使用。
除此之外，这个超级菜单在Click事件上工作，这可能会让用户感到困惑，因为通常大多数用户都习惯于将效果悬停在菜单上。
我如何才能改变点击甚至悬停，这样当用户将鼠标悬停在菜单上时，它就会显示出来，直到用户将鼠标移出菜单都是下拉列表。这是一个响应式菜单设计&可能是故意为单击事件而设计的。
$(function() {
cbpHorizontalMenu.init();
});
实际示例：
注意:请将jsFiddle的`Result1区域的宽度调大到大屏幕
浏览 0提问于2013-04-22得票数 0
回答已采纳
2回答
我有一个二级菜单，完美地工作在桌面上悬停，隐藏div时，没有悬停主菜单项。
因此，对于移动/触摸设备，我需要从下拉列表中单击以关闭它，但我尝试的不是隐藏UL，也是当我单击桌面时，悬停不再显示下拉UL。
这是html
<body>
<div id="top">
<div id="menu" class="wrap">
<ul id="nav">
<li><a hre
浏览 9提问于2012-12-12得票数 0
4回答
在创建响应式网站时，我遇到的一个常见问题是如何制作一个适用于触摸设备的多级导航菜单(3级或更多)。我见过很多插件和技术，但它们中的大多数都失败了，因为它们不允许二级页面既充当指向页面的链接，又充当子菜单中的子菜单中的子项的父项。一些技术通过在单击父页面名称转到实际页面时显示子菜单项的箭头图标来解决此问题。但在移动设备上，这些图标通常是非常小的目标，因此很难使用。这个问题有没有其他的解决方案( jquery或javascript插件，或者直接的CSS/JS代码)？
浏览 1提问于2014-05-30得票数 0
1回答
我的目标是让JQuery菜单在悬停或单击时做出响应。使用HoverIntent插件，下面的代码可以正常工作。但是，如何在维护用户友好的菜单的同时添加单击事件？在计划如何编写这段代码时，我曾考虑在单击菜单项时向悬停事件添加延迟，但我不确定该实现是否可行。如何将单击事件添加到下面的代码中？
<script type="text/javascript">
$(document).ready(function() {
function show() {
var menu = $(this);
menu.children(".options").slid
浏览 0提问于2011-05-21得票数 0
回答已采纳
我有一个下拉菜单，我试图使它在触摸设备上的功能更符合逻辑，目前它遵循链接。
在桌面上，下拉菜单显示在鼠标悬停上，当单击菜单项时，您将被带到页面。我在这上面添加了一段代码，这样它就不会遵循touch devicesc上的链接。
function(e) {
if (isTouch) return false;
showMenu();
}
我有点担心SEO的影响，它会有任何影响吗？
浏览 0提问于2013-12-05得票数 5
回答已采纳
1回答
在为我正在重新设计的网站开发移动导航菜单时，我发现许多移动浏览器通过点击触发CSS :悬停事件，包括Chrome、FlashFox和Android4.x上的默认浏览器，以及iOS 7上的Safari。这种行为广泛适用吗？我认为Android2.x手机可能会出现问题。
我想知道是否有人有过这方面的经验，这种行为是否可以安全地依赖于我的导航菜单。另外，是否有某种规范来定义这种行为，或者它是否只是某种形式的出现？据我所见，它在设备上的表现似乎相当一致。
我以前用JavaScript做过移动导航菜单，但这将是一个不错的选择。
我知道有几个关于堆栈溢出的问题，但它们都很老了，我找不到任何专门处理我想知道
浏览 1提问于2014-08-24得票数 6
回答已采纳
1回答
我第一次使用bootstrap版本2.3。到目前为止，这并不是很顺利，因为这是我第一次实现bootstrap响应式设计。
我有一个带有子菜单的导航菜单，我被要求同时拥有这些菜单的click和hover功能，以便当网站在桌面上查看时，它使用悬停来查看子菜单，并使用点击事件在移动设备上查看。
在几个问题后，我设法使它工作，以便我有两个事件工作的菜单导航，但我仍然有一个问题，我仍然被卡住。
到目前为止我所做的演示的链接如下：
现在在移动设备上，我必须双击菜单并等待半秒，子菜单才会打开。我不知道如何在用户的一次点击中显示子菜单。
我已经在这个问题上挣扎了两天，所以我希望在这个问题上能得到帮助。
参考
浏览 2提问于2013-08-23得票数 1
3回答
我有一个网站上的CSS下拉菜单。顶部有一个父类别列表，当您将鼠标悬停在其中一个类别上时，会出现一个下拉菜单，您可以在其中单击子类别之一。
当您单击子类别时，将触发ajax页面加载并替换页面内容。效果很好。
但问题是，因为页面没有重新加载，所以下拉菜单仍然存在。您必须将鼠标从它上面移开，才能使它消失。这很烦人。我们希望单击子类别时菜单消失。在触摸式设备上，这种行为更令人恼火。
而不是在这里张贴代码，我将把一个链接到网站：有问题的菜单是在顶部的-‘竞赛马’‘休闲马’等。
我对如何在检测到点击时清除悬停状态，或者更好地处理菜单的方式感兴趣。我已经尝试过jquery removeClass()，但是我
浏览 3提问于2012-12-28得票数 2
回答已采纳
我知道这听起来如何，但是用jquery改变单击的悬停效果是可能的吗？
我有这个，如果你看一下菜单(特别是e-rowery)，你会发现它在胡佛上工作。不幸的是，非触摸屏设备使用胡佛，所以我想把它转换为点击菜单，而不是胡佛。对于如何使用jquery实现这一点，有什么想法吗？
浏览 1提问于2012-03-11得票数 0
1回答
我试图单击一个CSS menu，首先我需要在上面悬停，然后单击一个子菜单链接，当我作为个人或JUnit测试运行测试时，我能够这样做，但是当我从ant运行相同的测试时(我已经创建了一个用于运行测试的批处理文件)，鼠标悬停不起作用。
悬停并单击子菜单链接的代码
String menuhoverlink = "//*[@id='orders']/a";
String sublink = "//*[@id='orders']/ul/li[4]/a";
Actions builder = new Actions(driver
浏览 3提问于2014-12-24得票数 1
我单击firebug图标，然后悬停在菜单项上，以检查它在firebug编辑器上的css
然后，我悬停在样式编辑器上，以改变它们的某些内容，并且由于菜单关闭，css失去了焦点
如何使悬停菜单保持打开，这样我就可以用firebug编辑它的样式了？
浏览 1提问于2014-06-25得票数 1
回答已采纳
1回答
悬停时显示菜单仅适用于iPad
、、、、
使用iPad时，上的菜单不显示。它是这样设计的:菜单悬停在上面，下面的ul li列表应该会显示，但它没有显示。当你单击菜单时，什么也不会出现。
我需要使用onclick事件编写一些JS来显示子菜单。但这只需要特定于iPad。
是否可以编写特定于特定设备的JS？
我只需要让这个菜单工作，它似乎iPads不会显示悬停项目，即使你点击...这使得在iPads上对:hover的使用完全失效。
浏览 1提问于2013-09-11得票数 0
2回答
我正在将菜单项添加到应用程序指示器中。我不希望它们的行为像普通的菜单项:我希望它们具有正常的外观，但不会对鼠标悬停和鼠标单击做出响应。
我该怎么做呢？试图在gtk到达事件之前获取它们感觉很脆弱-感觉应该有更好的方法。
浏览 1提问于2011-02-13得票数 2
1回答
下拉列表被隐藏
、、
我正在使用bootstrap创建一个响应式站点。
现在，在移动分辨率上，我们得到了一个移动菜单。
这是它被编码的网站：
要重现/查看问题的确切原因:请使用移动解决方案打开上面的站点。单击菜单并将鼠标悬停在“解决方案”前的任何下拉列表上，菜单将被截断。这种情况只会第一次发生。
下面是same：的屏幕截图
任何帮助都是非常感谢的。
谢谢,
浏览 0提问于2013-07-04得票数 0
1回答
我有一个菜单，当你悬停在标题中的“菜单”链接时。现在下拉菜单通过CSS显示/隐藏。我想保持悬停功能，但也添加了一个jQuery功能，如果您单击单词“菜单”，它会切换菜单并保持它的打开，即使您移动鼠标离开。
我可以做一个或另一个，但还没有弄清楚是否有可能将两者结合起来。
下面是单击/切换的javascript：
$("#menu-drop-arrow").click(function(){
var a=300;
$("#menu").slideToggle(a);
$("#hide_menu").click(function
浏览 2提问于2014-01-07得票数 2
我有一个下拉菜单。在非触摸屏设备上，下拉菜单显示在悬停状态。 在触摸屏上，菜单在单击时显示，直到页面导航离开。用户单击下拉显示，但页面仍会导航离开。我已经添加了aria-haspopup，我认为它会阻止页面在第一次触摸元素时导航离开。但是用户仍然被导航到该页面。 <span class="navbar-dropdown">
<a href="/page" aria-haspopup="true"><span>
浏览 75提问于2021-11-03得票数 0
6回答
我现在正在一个网站上工作，但我在让简单的CSS做我想做的事情时遇到了麻烦。我正在尝试创建一个下拉菜单，当鼠标悬停在移动设备上时，它会变得可见。我已经创建并隐藏了下拉菜单，还创建了汉堡图标。
我试过使用JavaScript，但我真的讨厌JavaScript。我甚至不想提起这件事，哈哈。当我意识到使用JavaScript一无所获后，我认为我应该只使用CSS就能做到。我已经重写了几次代码，认为我犯了一个找不到的拼写错误。
@media screen and (max-width:768px){
.topNav{
position: absolute;
rig
浏览 0提问于2019-06-25得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
