我想将默认的引导导航栏组件更改为移动上的钻取导航。 我已经添加了一些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，但我不知道如何使用。
有什么办法可以把菜单从点击改为悬停吗？
悬停时的菜单打开关闭行为可以通过下面的方式使用鼠标进入和鼠标离开事件的组合来实现。
// 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');
}
})
就像你说的。。。你需要用鼠标进入和鼠标离开。。。简单的做这个。
$('.mega-menu-trigger').bind('mouseenter mouseleave' ,function(e){
在codePen中与您的代码一起工作的Css代码:
.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;
}
