在悬停时打开菜单，而不是使用jQuery单击
基础概念
悬停（Hover）是指鼠标指针停留在某个元素上。在网页设计中，悬停效果常用于提示信息、导航菜单等交互元素。通过CSS和JavaScript，可以实现当鼠标悬停在某个元素上时，显示或隐藏子菜单。
相关优势
- 用户体验：悬停打开菜单可以提供更流畅的用户体验，用户不需要点击即可看到菜单选项。
- 减少操作步骤：相比单击打开菜单，悬停打开减少了用户的操作步骤，提高了效率。
- 视觉反馈：悬停效果可以提供即时的视觉反馈，增强用户对界面的感知。
类型
- 纯CSS实现：通过CSS的
:hover伪类实现悬停效果。 - JavaScript实现：通过JavaScript监听鼠标事件（如
mouseenter和mouseleave）来实现悬停效果。
应用场景
- 导航菜单：在网站的顶部或侧边栏，当用户将鼠标悬停在某个菜单项上时，显示该菜单项的子菜单。
- 工具提示：当用户将鼠标悬停在某个按钮或图标上时，显示该元素的详细信息或操作提示。
示例代码
纯CSS实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Menu Example</title>
<style>
.menu-item {
position: relative;
display: inline-block;
margin-right: 20px;
}
.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #f9f9f9;
padding: 10px;
border: 1px solid #ccc;
}
.menu-item:hover .sub-menu {
display: block;
}
</style>
</head>
<body>
<div class="menu-item">
Menu Item 1
<div class="sub-menu">
Sub Menu Item 1.1
<br>
Sub Menu Item 1.2
</div>
</div>
<div class="menu-item">
Menu Item 2
<div class="sub-menu">
Sub Menu Item 2.1
<br>
Sub Menu Item 2.2
</div>
</div>
</body>
</html>JavaScript实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Menu Example</title>
<style>
.menu-item {
position: relative;
display: inline-block;
margin-right: 20px;
}
.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #f9f9f9;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="menu-item" onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">
Menu Item 1
<div class="sub-menu">
Sub Menu Item 1.1
<br>
Sub Menu Item 1.2
</div>
</div>
<div class="menu-item" onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">
Menu Item 2
<div class="sub-menu">
Sub Menu Item 2.1
<br>
Sub Menu Item 2.2
</div>
</div>
<script>
function showSubMenu(element) {
element.querySelector('.sub-menu').style.display = 'block';
}
function hideSubMenu(element) {
element.querySelector('.sub-menu').style.display = 'none';
}
</script>
</body>
</html>可能遇到的问题及解决方法
- 子菜单位置不正确：确保子菜单的
position属性设置为absolute，并且父元素的position属性设置为relative。 - 子菜单显示延迟：可以通过CSS的
transition属性来平滑显示和隐藏效果。 - JavaScript事件冲突：确保没有其他JavaScript代码干扰悬停事件的触发。
参考链接
通过以上方法，你可以实现一个在悬停时打开菜单的功能，提升用户体验和交互效果。
相关·内容
1回答
我有一个在悬停时打开的菜单。但是在右键单击时，当context菜单打开时，菜单就会消失。但我搞不懂为什么。我需要同时打开的悬停菜单与contextmenu/右键单击。
jQuery代码(版本jquery-1.11.2.min.js)：
jQuery(document).on('mouseover','#main_menu',function() {
jQuery('#main_menu_inner').show();
});
jQuery(document).on('mouseleave'
浏览 2提问于2015-04-17得票数 1
我正在为一个网站使用jquery智能菜单，当用户悬停父项目时，插件默认显示子菜单，但是，我的父项目没有内容，单击它们应该会以与我悬停时相同的方式打开子菜单。
我看过他们的网站，但我发现很难找到我想要的东西。
以前有人这么做过吗？我希望找到一个可以传递的参数，但我在这里迷路了。
谢谢
浏览 1提问于2014-02-06得票数 1
1回答
嗨，我的网站有一个在桌面上完美工作的主导航菜单。鼠标悬停将打开下拉菜单，父菜单项也是可点击的链接(而不是'#')。
问题出在移动和触摸设备上。由于这些设备没有‘悬停’，当我点击一个父类别时，我会被直接带到链接。如何才能在第一次单击时打开下拉列表，并使父菜单链接在第二次单击时仍然有效？
我是否应该将下拉菜单设置从“悬停时打开”切换为“单击”，然后使用css和jquery在非触摸设备(即桌面)上启用悬停？
我是一个完全的网页设计新手。我花了很多时间研究jquery和css代码，并尝试了关于这个问题的十几种不同的方法。似乎没有真正可靠的解决方案来解决这个问题，这导致了客户在移动平台上
浏览 0提问于2015-07-16得票数 0
2回答
我正在开发一个与CSS和jQuery下拉菜单完成的网站。
当我单击打开它时，当菜单比页面底部大时，滚动条会自动增加。但是当我打开一个带有悬停效果的子菜单时，滚动条不会增加，内容也会隐藏起来。
这只会在google Chrome、IE和Firefox上正常出现。
为了可视化问题，打开www.rspneus.com.br，单击标记为"MARCA“的菜单，然后将鼠标悬停在"KUMHO”项上。
致谢问候
浏览 1提问于2012-05-25得票数 2
1回答
我正在设计一个响应性下拉菜单，其标记类似于以下内容：
<nav id="nav" role="navigation">
<a href="#nav">Show navigation</a>
<a href="#">Hide navigation</a>
<ul>
<li><a href="/landingpage.html">anchor link 1</a>
<d
浏览 1提问于2013-08-01得票数 3
回答已采纳
我试图让Jquery Selectmenu plugin在我鼠标悬停时展开，但当我离开它时再次关闭。
我决定使用MouseOver和MouseOut事件以及open和close命令。
问题在于它是如何工作的。它似乎在div之外创建了一个假菜单，所以只要我移动到选项上，菜单就会再次关闭。
我在JsFiddle中复制了这段代码：
我很希望能让它工作起来。
此外，如果我能够让它在mouseout上关闭，如果它是由mouseover激活的，但如果它不是通过单击激活的(因此，如果用户单击菜单，它将保持打开，直到他选择一个选项或单击外部)。但我想这是一个更难解决的情况。
浏览 1提问于2012-05-22得票数 0
回答已采纳
我在导航中有菜单项，当它们悬停时，我应用一个类，当它们不悬停时，通过.toggleClass()删除一个类。
但是，如果有人单击其中一个菜单项，且在页面重新加载时，其鼠标仍停留在菜单顶部，则当鼠标不再悬停在该菜单项上时，类将被添加，当菜单项悬停时，类将被删除--这与我想要完全相反。
HTML
<div class="mega-menu">
<div class="mega-menu-2 mega-menu-item">{mega-menu-2:content}</div>
</div>
jQuery
$(
浏览 14提问于2018-02-07得票数 0
回答已采纳
我想使菜单与切换菜单在AMP使用没有java脚本或jquery的风格，我遵循这个解决方案，在这个链接但菜单刚刚打开时悬停，我希望菜单打开时点击切换按钮。
浏览 1提问于2016-03-29得票数 0
3回答
我有一个情况，我想打开主菜单的子菜单，其中有布局构建使用嵌套的"ul-li“。
当鼠标悬停到拥有子女的li (ul-li)时，子菜单将打开，如下所示
<ul class="dropdown">
<li>/<li>
<li>/<li>
<li class="dropdown-menu">
<a> Target Menu </a>
<ul class="dropdown">
<
浏览 0提问于2018-07-17得票数 3
回答已采纳
1回答
HTML5响应式导航问题
、、、、
因此，当屏幕宽度大于580px时，它需要在鼠标悬停时工作，它确实做到了。如果屏幕宽度小于580像素，您必须单击链接才能显示子链接。例如，如果你查看并点击portfolio，子菜单就会打开，但在这些子菜单中还有其他子菜单，例如work有两个子菜单：-> internship和freelance。问题是，在移动视图中，portfolio可以在单击时工作，但子菜单的工作在鼠标悬停时，但它们也需要在单击视图中，如果你在屏幕上的其他地方单击，它们需要消失。
在jQuery中，我测试了：
if (document.documentElement.clientWidth < 580) { }
浏览 3提问于2013-06-28得票数 0
回答已采纳
1回答
移动设备上的下拉导航
、、、
我的公司使用专有的CMS开发网站，我们适应移动开发的能力相当差。我们开发专门针对手机的网站，但我们不会免费提供这些网站。无论如何，我们的大多数网站都使用无序列表的水平导航，当父项目悬停在上面时，子菜单就会出现。这在桌面设备上可以，但在移动浏览器上就不起作用了。子菜单出现了，但它们的功能就像它们是透明的一样，单击子项时不会出现任何地方，或者更糟糕的是，会转到子菜单后面的链接。
我能够编写一个简短的jQuery脚本(我是jQuery的初学者)，它强制在单击父链接时使子菜单保持可见。它可以工作，但不是在第一次单击时-第一次单击时，浏览器会尝试启动移动悬停模拟(?)并在屏幕上闪现该子菜单一瞬间。然后，
浏览 3提问于2013-05-22得票数 0
回答已采纳
我正在使用引导3和我有一个下拉菜单。我没有使用默认的动画，而是使用了JQuery、slideDown和slideUp。唯一的问题是，当我将鼠标悬停时，它可以正常工作，但当我单击它正确显示的菜单时，slidesDown工作，第二次单击然后slideUP工作，然后在第三次单击以检查是否将再次工作时，没有响应。我看到了许多例子和不同的方法，但我是一个新手，没有多少运气。
有效的相关守则：
$(document).ready(function () {
$('.navbar-default .navbar-nav > li.dropdown').hover(function
浏览 2提问于2014-12-05得票数 0
回答已采纳
我有一个下拉菜单，当用户将鼠标悬停在导航链接上时会显示该菜单。这是通过.hover()在jQuery中触发的。当用户单击导航链接(iPad/iPhone)时，此下拉菜单的打开和关闭在触摸设备上运行良好，但当用户单击页面上的其他位置时，我会尝试隐藏下拉菜单。
我已经找到了使用.click()完成此任务的方法，但没有找到.hover()。
这是我的基本jQuery代码：
$('.hoverItem').hover(function(e) {
$('.dropdown').toggleClass('visible');
e.stopPropa
浏览 2提问于2016-05-13得票数 0
1回答
我有一个导航菜单使用启动3，我不知道如何禁用“悬停”功能的子菜单。我希望子菜单只在单击时打开。
类似于：
$(".dropdown-submenu").hover(function(){ dontOpen() })
$(".dropdown-submenu").click(function(){ openIt() })
但我不能让它在悬停时不打开。
编辑：
Zakaria Acharki的功劳就像一种魅力:)
在我的实际应用程序中，.dropdown-submenu:hover被隐藏在引导css文件中的某个地方。因此，我将css文件更改为
.dropdown-
浏览 2提问于2017-11-22得票数 1
回答已采纳
我需要一个菜单，当我悬停在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
我有一个离开画布导航菜单(类名，是通过悬停，使用jQuery在我的Wordpress网站上启用。它应该是在页面加载时不可见的。
对于移动版本，我希望通过单击菜单图标来激活相同的导航菜单(这是我给出的两个类，按以下顺序:移动导航切换显示-导航-移动)。切换方法似乎只适用于垂直切换。我的解决方案是在单击而不是悬停时复制相同的动画，方法是使用图标上的toggleClass方法在一个类名之间切换，该类名打开菜单导航(show- nav -mobile)并使用以下代码关闭它(隐藏-导航-移动)：
jQuery(".show-nav-mobile").click(function(){
浏览 4提问于2022-09-21得票数 0
回答已采纳
css菜单的工作版本在这里是，它可以在所有浏览器上工作，在将鼠标悬停改为单击后，菜单也必须在所有浏览器上继续工作。
在jsfiddle上完成菜单标记
.menu ul li a:hover {background:#fff; color:#000;}
正如您所看到的，我所需要的就是使菜单在单击时打开，在单击时关闭，这样当用户通过单击选择一个选项卡时，该选项卡将保持打开状态，除非通过单击选择另一个选项卡，或者重新单击相同的选项卡以关闭它。我已经尝试过JQuery，但不能让它工作，并查看了其他帖子，但提示也不起作用。换句话说，菜单必须像这个引导菜单一样工作，它是在点击时激活的：
提前感谢您的帮助。
浏览 5提问于2013-05-16得票数 2
我正在尝试设置一个jquery函数，该函数检查窗口宽度，以便导航条正常工作。我想要做的是:如果屏幕宽度大于949 on，则启动一个函数，使悬停在锚链接上的打开下拉子菜单；如果屏幕宽度小于或等于949 on的，则删除该函数，以便必须单击.dropdown锚链接才能打开下拉子菜单(在默认情况下单击下拉链接时会打开它们--我认为这是一个引导组件)。
我根据在堆栈溢出中找到的一些类似的例子创建了几个函数，但发现只有当屏幕宽度超过949‘t时，函数才会触发，因此在较小的宽度下，.dropdown锚点仍然通过悬停打开子菜单，这正是我不想要的。
var width = $(window).width();
浏览 2提问于2016-06-27得票数 0
回答已采纳
我在使用jquery / css创建下拉菜单时遇到了问题。
现在，每个类别的每个下拉菜单都是一个div，它有一个隐藏的显示，直到类别悬停。我试图让jquery在hover和mouseleave上显示/隐藏正确的div。
我使用的逻辑是:如果类别链接或下拉菜单悬停，则显示下拉菜单，否则隐藏下拉菜单。
更具体地说，我遇到的问题是，只要用户将鼠标悬停在类别链接上，就会显示下拉菜单……一旦dropdown div没有悬停，它就会关闭。我需要它关闭，如果下拉列表没有悬停或如果类别链接没有悬停…
现在，即使我将鼠标悬停在相邻的类别上，试图查看相邻的下拉菜单的类别，第一个下拉菜单仍然保持打开，除非我先将鼠标
浏览 0提问于2012-04-01得票数 0
2回答
平板电脑悬停状态被卡住
、、、、
我有一个使用悬停状态的标题菜单。在悬停时，li的颜色会更改，而子ul将在下面打开。
为了在触控设备上工作，我还为这些元素添加了一个'hover‘类，脚本如下：
$(".isc-primary-nav li.has-children a.nav-link.hoverable").unbind().on("touchstart", function (e) {
'use strict';
var li = $(this).parent().parent();
if (li.hasClass("hover"
浏览 2提问于2015-08-12得票数 0
1回答
我有一个响应菜单，当查看在PC上的悬停菜单下降，在平板上显然你不能悬停等等，我需要菜单下降。但是，该链接将用户定向到单击时的页面。我需要防止该链接在单击(特定浏览器大小)时触发，这样它就可以打开下拉菜单。
<ul class="mainMenu">
<li>
<a href="page.html">Page</a>
<ul class="subMenu">
<li><a href="">Sub Page 1&
浏览 3提问于2013-11-19得票数 0
回答已采纳
1回答
我工作的网站，有一个网站，这是建立在Umbraco上，并利用bootstrap和Jquery。
我们有一个顶部导航菜单，其中有页面和子页。当您将鼠标悬停在导航菜单上时，它会打开子菜单并允许您转到它们。
当在移动设备上查看此菜单时，它会变成一个汉堡包，当您单击它时，它会下拉并显示主要选项卡。在这里，当您单击main选项卡时，它会快速显示子菜单，但随后会转到main选项卡，而不是允许您单击子菜单。
问题是，这是一个即将推出的大型网站，所以没有简单的方法来找到什么链接到什么。解决这个问题的优雅方法是什么？
我不能提供链接，因为它是一个公司的事实。
谢谢!
浏览 0提问于2016-11-02得票数 0
1回答
当我单击菜单切换并调整浏览器窗口大小时，菜单将消失。
这是菜单的jQuery：
$('.menu ul li ul').parent().addClass('parent');
$(".menu-toggle").click(function() {
$("#nav").slideToggle(function(e){
$(this).toggleClass("nav-expanded");
});
});
在移动端，我想停用悬停效果，并通过jQuery将其替换为子子菜单的切换效果；我该怎么做
浏览 1提问于2015-06-06得票数 1
1回答
我正在构建一个响应性的导航，刚刚遇到了一个问题。导航的本质是让它响应，所以你点击一个‘三行’按钮，菜单弹出页面。该菜单支持嵌套菜单，因此在菜单中，您也可以单击一个框(右边)打开嵌套菜单。现在，我的问题是，我只想打开导航点击，而不是悬停。
实质上：
主导航(桌面)：悬停打开孩子
当在一定宽度下(媒体查询)隐藏它以显示要单击的黑匣子，您可以单击下一个框来打开
一切正常，但是打开桌面导航的悬停事件显然是在响应视图中触发要打开的导航。我怎么才能阻止这一切？
这是导航的JSFiddle，请单击黑匣子：
浏览 0提问于2013-03-24得票数 0
回答已采纳
3回答
我已经列出了一些列表，当涉及到jQuery和使我的菜单切换到单击事件时，我想我已经迷上了它们。
以下是我所拥有的：
问题在菜单上。当鼠标悬停元素时，它会显示，当我单击它时，它会隐藏。但是当我从CSS中删除
ol > li:hover > ul
{
display: block;
}
在单击Menu2选项卡时，它甚至无法工作。这样做的目的是删除menu2上的“悬停”，并使其只适用于“单击”。我怎么才能修好它？
浏览 5提问于2015-07-02得票数 3
回答已采纳
我正在做一个使用Twitter Bootstrap 3的网站。我的导航栏上有一个下拉列表，我想在窗口宽度高于780px的情况下显示鼠标悬停的下拉列表。如果宽度小于780px，我会看到移动菜单版本，所以在这种情况下，我想单击导航栏以显示下拉菜单。我用$( window ).resize(function()和$(document).ready(function()编写了这段代码
if ($(window).width() >= 780) {
jQuery('ul.nav li.dropdown').hover(function () {
jQuery
浏览 3提问于2013-11-07得票数 0
3回答
我已经用css创建了一个下拉菜单。下面是HTML代码：
<li class="menu" id="menu">
<div class="dropdown">
<div class="col1"> ...
下面是css：
.dropdown {
visibility:hidden;
/*...*/
}
#menu li:hover .dropdown{
visibility:visible;
}
这个可以完美地工作。在jQuery中，我处理此菜单中链接的单
浏览 4提问于2011-11-19得票数 1
我知道有数以百计的jQuery插件的下拉，但我似乎找不到适合我的需要。所需经费如下：
下拉列表按一下打开
如果下拉列表是打开的，则其余的下拉列表将在悬停时打开。
下拉列表只会关闭，直到单击。
这与MacOS管理菜单栏的方式非常相似，我认为Windows也是这样做的。
中的菜单非常类似于此，以供参考。
我不能将jQuery UI作为附加依赖项。我的申请本来就已经很胖了。
浏览 6提问于2012-05-30得票数 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
在我的主导航中，我有一系列的子菜单。我的问题是，在常规浏览器大小上，我需要在鼠标悬停时打开菜单，而在移动视图上，我需要在单击时打开菜单。我有工作的jQuery，但是我不能关闭移动上的悬停和点击常规视图。
<ul class="mainMenu">
<li>
ITEM
<ul class="subMenu">
<li></li>
</ul>
</li>
</ul>
jQue
浏览 3提问于2013-11-05得票数 1
回答已采纳
我有一个N级菜单结构，首先我必须隐藏所有级别的子菜单，并在父菜单的悬停时显示它们。我一直在尝试这一点，我已经隐藏了所有的子菜单并在单击时显示它们，但问题是当我单击其他父菜单时，以前打开的菜单必须关闭，如果我再次单击该菜单，它的子菜单应该处于隐藏状态，我想要一些缓解和动画效果，同时打开和关闭菜单时，它应该作为切换工作。
这就是我一直在尝试做的：
$(document).ready(function(){
$("li").children('ul').hide();
$("li a").click(function(){
$(this).next(&
浏览 3提问于2013-03-24得票数 0
回答已采纳
2回答
我正在尝试用jquery和php/mysql在facebook上复制post上的lock函数。
下图显示了点击时所做的不同动作。
我想你会做一些事情，比如在悬停时，显示一个带有工具提示的隐藏div，在悬停关闭时删除它。在单击事件时，显示另一个隐藏的div，但也必须以某种方式更改按钮的颜色。当菜单div被单击打开时，它有一个菜单，如果其中任何一个被单击，它需要将结果发送到使用ajax的后端脚本。在点击一个选项或在div之外点击后，它将隐藏所有的div，也许只是在任何地方点击一下就可以关闭它，所以也许可以使用切换？
有没有人能说清楚我的方向是对的。我很少使用jquery或javascript。任何
浏览 2提问于2009-12-31得票数 0
回答已采纳
3回答
我有一个网站上的CSS下拉菜单。顶部有一个父类别列表，当您将鼠标悬停在其中一个类别上时，会出现一个下拉菜单，您可以在其中单击子类别之一。
当您单击子类别时，将触发ajax页面加载并替换页面内容。效果很好。
但问题是，因为页面没有重新加载，所以下拉菜单仍然存在。您必须将鼠标从它上面移开，才能使它消失。这很烦人。我们希望单击子类别时菜单消失。在触摸式设备上，这种行为更令人恼火。
而不是在这里张贴代码，我将把一个链接到网站：有问题的菜单是在顶部的-‘竞赛马’‘休闲马’等。
我对如何在检测到点击时清除悬停状态，或者更好地处理菜单的方式感兴趣。我已经尝试过jquery removeClass()，但是我
浏览 3提问于2012-12-28得票数 2
回答已采纳
1回答
我已经创建了，有3层。
单击顶级项目后出现问题。您会注意到，在顶部的项目上有一个LI:Hover伪类，当您将鼠标悬停在这些项目上时，它会将它们突出显示为灰色。如果你点击这些顶部的菜单项之一，然后等待2秒钟离开菜单区域，它将恢复到当前页面的菜单项。
这就是问题所在。如果你现在将鼠标悬停在你刚刚点击的顶部菜单项上，它的伪悬停似乎已经消失，或者被禁用了。
我不确定这是我的jQuery/Javascript错误还是CSS错误。
任何帮助都是最好的！
谢谢，德文
浏览 2提问于2012-09-13得票数 1
回答已采纳
2回答
基本上没有问题，但我想添加一个功能。它按原计划工作了。我在使用爱德华·麦金太尔的wp_bootstrap_navwalker
问题是，如果我为具有这种结构的WooCommerce创建一个页面：
~>商店
~~>我的帐户
唯一的工作链接将是“注销”(三级菜单)。所有其他人都会被移走。好吧，没关系，但我已经做好了菜单，显示在:悬停。
因此，问题是如何禁用单击函数(我不知道如何更好地解释它)。下面是在悬停时进行引导的代码：
var slideDuration;
slideDuration = 100;
jQuery('.ddmenu li.drop
浏览 4提问于2014-03-02得票数 0
1回答
我正在使用Ubuntu20.04LTS与GNOME。当我转到顶部栏并点击应用程序按钮时，应用程序菜单就会打开。但是，当鼠标转到我所需的应用程序时，它经常会通过Places按钮，它会自动打开places菜单。我不希望这种事发生。
如何配置它，使菜单只在单击菜单时打开，而不是在鼠标悬停时打开？
PS:只有当顶部栏上的另一个菜单已经打开时，才会出现鼠标悬停点击问题。如果没有菜单打开，那么悬停不会做任何事情，我必须点击打开它。
浏览 0提问于2021-06-10得票数 3
回答已采纳
2回答
我正在编写一个扩展，它添加到一个现有的网站，所以我不能直接修改HTML。基本上，包含在单个div中的一系列链接仅由空格分隔。我试图使用jquery在本系列的任意位置添加自己的链接，并在链接旁边打开一个小菜单，就像右键单击上下文菜单一样。当链接/菜单悬停焦点消失时，它应该会消失。
我可以处理jquery的实际行为，但我有点担心文档中应该将这个菜单的html放在哪里。应该在身体的末端吗？就在链接之前/之后？然后，当我在链接上悬停时，如何获得这个元素的正确位置？我找到了一些例子，但它们都使用列表。我只需要一个菜单上的链接悬停，显示在链接旁边。
简而言之，我主要关心的是如何将弹出的div正确地放置在链
浏览 2提问于2013-07-01得票数 4
回答已采纳
1回答
我有一个菜单，当你悬停在标题中的“菜单”链接时。现在下拉菜单通过CSS显示/隐藏。我想保持悬停功能，但也添加了一个jQuery功能，如果您单击单词“菜单”，它会切换菜单并保持它的打开，即使您移动鼠标离开。
我可以做一个或另一个，但还没有弄清楚是否有可能将两者结合起来。
下面是单击/切换的javascript：
$("#menu-drop-arrow").click(function(){
var a=300;
$("#menu").slideToggle(a);
$("#hide_menu").click(function
浏览 2提问于2014-01-07得票数 2
1回答
多级子菜单在点击时不关闭子菜单
、、、、
现在我正在做一个基于点击而不是悬停的多级子菜单。我在打开另一个子菜单时关闭子菜单时遇到问题。打开另一个子菜单时，必须关闭所有二级子菜单。
这就是项目：。单击按钮"Productcategorieën“以显示菜单。点击"Zonnepanelen“，紧接着点击"Verlichting”。您将看到"Zonnepanelen“子菜单没有关闭。
下面是我的代码：
jQuery('.navigation li.menu-item-has-children > a').click(function (e) {
e.preventDefault()
浏览 1提问于2017-10-03得票数 0
我正在尝试为菜单添加单击和悬停功能。我现有的Javascript可以在点击时激活菜单下拉菜单，它是：
<script type="text/javascript">
$(document).ready(function () {
$('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').
浏览 1提问于2012-09-04得票数 0
回答已采纳
我有一个父包装类和子角材料菜单按钮。当我悬停在父类之外时，我需要隐藏整个包装器。但是，当我单击父包装类中的按钮(该按钮打开mat菜单)时，整个父类将关闭。
我应该能够在父包装器中执行任何单击操作，并且只有当我悬停在父包装的外部时，它才会关闭。我如何实现这一点？
我试着加入
event.stopImmediatePropagation();
event.preventDefault();
event.stopPropagation();
在子席菜单的按钮上单击，但父包装仍然关闭。
这是我复制问题的stackblitz链接。在单击菜单按钮时，它应该打开菜单，而不是关闭整个父div。
我应该能够点
浏览 0提问于2019-05-24得票数 1
回答已采纳
可能重复：
我有一个下拉菜单，它可以很好地使用css .hover伪类。它在台式机和平板电脑上都能正常工作。在平板电脑上，当单击菜单时会触发悬停效果。想必平板电脑制造商这样做是为了使它们与这类菜单兼容。
该菜单是纯CSS/HTML，不需要javascript即可工作。
然而，我想增加滑动功能，这样你就可以在打开的菜单上左或右滑动，它将移动到下一个选项，而不必单击顶部菜单。不幸的是，程序控制菜单与平板电脑的悬停功能发生了冲突。IE，新菜单正在出现，但旧菜单并没有消失，因为平板浏览器仍然将其视为一个活动悬停。
因此，我想要做的是使用jquery禁用css :悬浮定义。一旦我这样做了，我将
浏览 3提问于2013-02-02得票数 0
我正在为一个小的手风琴风格的菜单编写活动状态代码，这很困难。我有悬停过渡的地方，菜单将保持打开时，单击，但是，我失去了我的样式后，用户单击并移动鼠标离开菜单。
我希望样式保持到单击下一项，依此类推。
我在这里工作的示例：
谢谢!
浏览 0提问于2013-04-16得票数 0
回答已采纳
1回答
如果每个菜单项悬停，下面的菜单将更改为红色。
这个菜单显示在我网站的每一页上。
我有以下问题：
如果用户要单击菜单项(例如菜单2)，页面将导航到标签中的页面集(即page2.html)。
如果用户将鼠标留在那里，与单击菜单项之前的位置相同(即在选定的菜单项上)，则菜单将在新页上自动更改为红色，因为下面的jQuery悬停代码将被激活。
有什么办法阻止这种行为吗？理想情况下，我希望用户必须鼠标离开菜单项，然后在菜单项更改为红色之前再次单击菜单项，如果用户单击其中一个菜单链接后仍在选定菜单项上方。
<script type="text/javascript">
$(do
浏览 2提问于2014-08-03得票数 0
回答已采纳
2回答
我在试着让手风琴停下来。
我想要达到的目标：
当鼠标悬停在菜单上时，下面的所有子菜单都打开了，但剩下的菜单仍然是折叠的。(简单地说，它是手风琴，但它是由悬停而不是点击触发的。)
我所取得的成就：
当我悬停父菜单时，它会打开子菜单。
我还没有实现的：
一旦我的鼠标离开父菜单，即使它仍然在子菜单上，子菜单也会崩溃。(简单地说，我的鼠标不能离开父菜单。我不能单击子菜单链接。)
HTML:
<div class="accordion">
<ul>
<li class="parentmenu"&g
浏览 1提问于2020-03-29得票数 2
1回答
当用户单击“后退”按钮时，我试图关闭自定义菜单抽屉。现在，这个设计缺陷是抽屉保持打开而不悬停的唯一方法。人们的愿望是，只有，才能使抽屉保持打开。
阐述：
当你在菜单上盘旋时，抽屉就会打开。
当您单击菜单(或抽屉)中的链接从而离开页面时，抽屉将在您刚刚离开的页面上保持打开状态。
当你使用浏览器的“后退”按钮返回你刚刚离开的页面时，你会看到打开的菜单抽屉。
关闭卡住的打开的菜单抽屉的唯一方法是悬停和离开它。
我尝试了显而易见的方法，即利用“卸载”或“卸载前”事件。这是不起作用的，因为当启动卸载时，鼠标仍在悬停该项目。悬停使抽屉保持打开，同时卸载事件也试图关闭。(我从演示中删除了坏掉的“卸载”函数。
浏览 0提问于2011-10-20得票数 1
回答已采纳
3回答
我正在使用Chakra UI创建一个菜单。我有这样的东西：
<Menu>
<MenuButton>hover over this</MenuButton>
<MenuList>
<Flex>To show/hide this</Flex>
</MenuList>
</Menu>
我试图在悬停时动态打开标签。MenuList的默认设置是在用户单击时打开。当我单击该按钮并将鼠标悬停在其上时，我的悬停状态即可工作。我正在试着找出一种方法，这样用户就不需要点击Me
浏览 30提问于2021-06-07得票数 1
回答已采纳
3回答
我有一个菜单，在990 to以上，它打开菜单，但当它下面，菜单变成一个汉堡包菜单，你需要打开它。问题是，当低于990 is时，我想要禁用悬停。这只有在990 is以下打开窗口时才有效。如果它开始于990 on以上，并且降低到低于990 on，则该窗口将保持悬停状态，因为窗口在990 on标记之上打开。我试图给它添加一个调整大小()，但它似乎不起作用。
jQuery(function($) {
if ($(window).width() >= 992) {
$('.navbar .dropdown').hover(function () {
浏览 3提问于2016-08-19得票数 0
回答已采纳
1回答
我不能想象任何人能够破解这一点，但任何帮助或一个正确的方向将是伟大的。
我有一个标准的菜单，其中有x数量的链接，这些链接悬停将打开一个子菜单。然而，点击时的主要链接是可访问的页面。
<ul id="mainNavigation">
<li>
<a href="/somewhere.html">Main 1</a>
<ul class="submenu">
<li><a href="/somewher
浏览 0提问于2017-05-24得票数 1
1回答
根据屏幕大小禁用功能？
、、、
我使用jquery在引导4中执行悬停下拉菜单。但是，当我调整到折叠视图(991)的大小时，将下拉菜单显示为块元素，以便在用户视图时打开这些下拉菜单，而不必单击或悬停下拉菜单。我的问题是，这个函数正在尝试运行，它在盘旋时会产生一些奇怪的不稳定效果。有没有一种方法可以根据屏幕大小禁用该功能？谢谢你的建议！
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(200);
}, function() {
$
浏览 1提问于2018-10-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
