悬停时打开菜单,而不是单击 jQuery
Open menu on hover instead of click with 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){
但这不起作用,我遇到的问题是在离开 link 后菜单仍保持打开状态。
我想我必须与 mouseleave
一起工作,但我不知道该怎么做。
有什么方法可以将菜单从单击更改为悬停吗?
鼠标悬停时菜单打开关闭行为可以通过以下方式组合使用 mouseenter 和 mouseleave 事件来实现。
// Klick Funktionen hinzufügen
$('.mega-menu-trigger').bind('mouseenter mouseleave' ,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 和 mouseleave...只需执行此操作即可。
$('.mega-menu-trigger').bind('mouseenter mouseleave' ,function(e){
Css 与您在 codepen 中的代码一起工作的代码:
.menu-item.has-sub-menu:hover > .menu > .menu-item{
margin-top: 0;
margin-bottom: 1em;
opacity: 1!important;
-webkit-transition: opacity .3s .6s ease-in-out, margin .6s ease-in-out;
transition: opacity .3s .6s ease-in-out, margin .6s ease-in-out;
}
试试下面的代码
$('.mega-menu-trigger').hover(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');
}
});
这将在悬停时打开菜单
这里是fiddlelinkhttps://jsfiddle.net/w4vmyrpz/
我想将默认的 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){
但这不起作用,我遇到的问题是在离开 link 后菜单仍保持打开状态。
我想我必须与 mouseleave
一起工作,但我不知道该怎么做。
有什么方法可以将菜单从单击更改为悬停吗?
鼠标悬停时菜单打开关闭行为可以通过以下方式组合使用 mouseenter 和 mouseleave 事件来实现。
// Klick Funktionen hinzufügen
$('.mega-menu-trigger').bind('mouseenter mouseleave' ,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 和 mouseleave...只需执行此操作即可。
$('.mega-menu-trigger').bind('mouseenter mouseleave' ,function(e){
Css 与您在 codepen 中的代码一起工作的代码:
.menu-item.has-sub-menu:hover > .menu > .menu-item{
margin-top: 0;
margin-bottom: 1em;
opacity: 1!important;
-webkit-transition: opacity .3s .6s ease-in-out, margin .6s ease-in-out;
transition: opacity .3s .6s ease-in-out, margin .6s ease-in-out;
}
试试下面的代码
$('.mega-menu-trigger').hover(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');
}
});
这将在悬停时打开菜单
这里是fiddlelinkhttps://jsfiddle.net/w4vmyrpz/