JQuery 悬停和下拉菜单
我在使用 JQuery 处理网站的下拉菜单时遇到一些问题。
基本上,我想要实现的是一个带有 JQuery 悬停的简单水平下拉菜单(在 Drupal 的 DHTML 菜单模块中)。然而,有一些烦恼我无法解决。
因此主菜单及其子
都是链接。当我单击其中一个子菜单时,一切都很好(我被定向到目的地,菜单重置为正常的未悬停状态)。但是,当我单击父菜单时,到达目的地后,即使下拉菜单重置回来,鼠标仍然悬停在链接上方。当我将鼠标移开时,这会导致下拉菜单再次短暂激活。我想要的是,下拉菜单仅在鼠标进入元素时激活,而不是在退出时激活。我尝试将 .hover()
分成 .mouseenter()
和 .mouseleave()
,但这反而导致下拉菜单不起作用根本不。帮助!
我的代码如下:
$(li).hover(function(e) {
Drupal.dhtmlMenu.expandMenu($(li));
},
function(e) {
Drupal.dhtmlMenu.collapseMenu($(li));
});
$(li).ready(function(e) {
Drupal.dhtmlMenu.collapseMenu($(li));
});
I'm having some trouble with my website's dropdown menu using JQuery.
Basically, what I want to achieve is a simple horizontal dropdown menu with JQuery's hover (in Drupal's DHTML menu module). However, there are some annoyances that I could not fix.
So the main menu and their child <li>
s are all links. When I click one of the child menu, everything is fine (I got directed to the destination, menu resets to normal unhovered state). But when I click the parent menu, after arriving at the destination, even though the dropdown menu resets back the mouse is still hovering above the link. This results in the dropdown being activated briefly again as I move my mouse away.
What I want is that the dropdown activates only when the mouse enters the element, not when it exits. I've tried separating .hover()
into .mouseenter()
and .mouseleave()
, but this instead results in the dropdown not working at all. Help!
My code is below:
$(li).hover(function(e) {
Drupal.dhtmlMenu.expandMenu($(li));
},
function(e) {
Drupal.dhtmlMenu.collapseMenu($(li));
});
$(li).ready(function(e) {
Drupal.dhtmlMenu.collapseMenu($(li));
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
使用 Nice Menus 模块。它会让你免于头痛。自从三年前开始使用 Drupal 以来我就一直在使用它。
Use the Nice Menus module. It will save you from this headache. I've been using it ever since I started with Drupal 3 years ago.
完全不需要使用 JavaScript 来实现简单的下拉菜单。请参阅 http://webdesignerwall.com/tutorials/css3-dropdown-menu (CSS3 是使用,但基本的 CSS 将在所有浏览器中工作)。纯粹用 CSS/HTML 来做
Absolutely no need to use JavaScript for a simple dropdown menu. See http://webdesignerwall.com/tutorials/css3-dropdown-menu (CSS3 is used but the basic CSS will work in all browsers). Do it purely in CSS/HTML