javascript - 悬停时打开菜单而不是使用 jQuery 单击
问题描述
我想将默认的 Bootstrap 导航栏组件更改为移动设备上的向下钻取导航。这样做,我添加了一些 JavaScript 代码来更改我的菜单。
这是我目前使用的代码:https ://codepen.io/cray_code/pen/dENeKM
它工作正常,但在桌面上,菜单在单击而不是悬停事件后打开。
对于桌面视口,有以下代码:
$('.mega-menu-trigger').bind('click' ,function(e){
e.preventDefault();
var current = $(this).next('.mega-menu');
$('.mega-menu-trigger').not(this).removeClass('active');
$(this).toggleClass('active');
$('.mega-menu').not(current).removeClass('open').addClass('closed');
if( !current.hasClass('open') ){
current.removeClass('closed').addClass('open');
} else {
current.removeClass('open').addClass('closed');
}
});
我试图将代码更改为mouseenter
:
$('.mega-menu-trigger').bind(mouseenter: function(e){
但这不起作用,我的问题是离开链接后菜单保持打开状态。我想我必须一起工作,mouseleave
但我不知道怎么做。
有什么方法可以将菜单从单击更改为悬停?
解决方案
正如您所说...您需要使用 mouseenter 和 mouseleave ...只需执行此操作。
$('.mega-menu-trigger').bind('mouseenter mouseleave' ,function(e){
推荐阅读
- c++ - 根据不同的硬件在任意数量的线程上分配 for 循环
- php - $_GET 未获取 URL 数据
- python - Qt:停靠小部件如何获得其初始大小?
- vba - 如何模拟箭头键被按下并按住然后释放?VBA
- swift - 无法保存 EKEvent,因为日历缺少默认组织者
- pandas - 我的 .loc 在应该工作的地方出错:“无法从重复的轴重新索引”
- electron - 如何使用 Mocha 测试需要 Node API 的自定义模块?“无法读取未定义的属性‘要求’”
- macros - 如何让这个公式只填写空白单元格?
- akka - 带有临时队列的 Alpakka JMS 请求/响应 - 开箱即用?
- android - 使用“仅 GPS”模式或“Wifi 网络”时,FusedLocationProviderClient 不起作用