Javascript 将megamenu从单击事件更改为悬停
我有一个megamenu，我想将click事件更改为hover事件。当您将鼠标悬停在“所有类别”上时，可以显示子菜单 目前，该示例仅适用于单击。您必须单击“所有类别”以显示所有类别 我已尝试改变事件：Javascript 将megamenu从单击事件更改为悬停,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个megamenu，我想将click事件更改为hover事件。当您将鼠标悬停在“所有类别”上时，可以显示子菜单 目前，该示例仅适用于单击。您必须单击“所有类别”以显示所有类别 我已尝试改变事件： $('.categorie-title').hover(function () { $('.vertical-menu-list').slideToggle(); }); 但当你用鼠标点击某个类别时，例如：“IT”，所有的大菜单都关闭了 如何使megamenu从单击到悬停运行 $（文档
$('.categorie-title').hover(function () {
$('.vertical-menu-list').slideToggle();
});
$（文档）.ready（函数（）{
$（'.categorie title'）。在（'click'，函数（）{
$（'.vertical menu list'）。滑动切换（）；
});
});
li{
列表样式：无；
}
.垂直菜单{
宽度：100%；
位置：相对位置；
}
.垂直菜单>跨度{
背景：#03A9F4无重复滚动0；
颜色：#fff；
光标：指针；
显示：块；
字体大小：15px；
字号：500；
保证金：0；
填充：14px 30px 12px；
位置：相对位置；
文本转换：大写；
高度：49px；
}
.vertical menu>span:：after..search box view.submit:：before{
内容：“";
字体系列：Fontsome；
字号：18px；
字体大小：正常；
位置：绝对位置；
右：13px；
最高：50%；
转化：translateY（-50%）；
}
.有大菜单{
线高：43px；
浮动：左；
填充：0；
背景色：#3e3e；
宽度：220px；
}
.垂直菜单列表{
背景：#fff无重复滚动0；
左：0；
填充：0 25px；
位置：绝对位置；
最高：100%；
宽度：100%；
z指数：999；
边框：2个实心#03A9F4；
边框顶部宽度：0；
}
.垂直菜单列表>li{
位置：相对位置；
}
.垂直菜单列表>li>a..类别菜单li a{
颜色：#333；
显示：块；
字体大小：14px；
字体大小：400；
线高：19px；
溢出包装：断开单词；
填充：17px0；
位置：相对位置；
文本对齐：左对齐；
文本转换：大写；
-webkit转换：所有0.3；
过渡：均为0.3秒；
}
.垂直菜单列表>li span..类别子li span{
显示：内联块；
宽度：35px；
}
.垂直菜单列表>li:悬停ul.ht下拉列表{
能见度：可见；
-webkiit变换：scaleY（1）；
-webkit转换：scaleY（1）；
变换：scaleY（1）；
不透明度：1；
}
.垂直菜单列表>li ul.megamenu{
背景：#fff无重复滚动0；
边框：1px实心#e5e3；
-webkit盒阴影：0 0 6px 0 rgba（0,0,0,0.2）；
盒影：0.0 6px 0 rgba（0,0,0,0.2）；
左：100%；
填充：10px；
排名：0；
宽度：905px；
}
.垂直菜单列表.ht下拉列表：之前{
背景色：#fff；
边框颜色：#f1f1f1透明透明#f1f1f1；
-o-border-image：无；
边界图像：无；
边框样式：实心；
边框宽度：1px；
内容：“；
显示：块；
高度：15px；
左：-8px；
位置：绝对位置；
顶部：21px；
-webkit变换：旋转（-45度）；
变换：旋转（-45度）；
宽度：15px；
}
.垂直菜单列表>li:n子项（n）>a:after{
内容：“\f107”；
字体系列：“FontAwesome”；
位置：绝对位置；
顶部：20px；
右：15px；
-webkit过渡：所有0.5s；
过渡：均为0.5s；
}
.垂直菜单列表>li:n子菜单（n）：悬停>a:after{
-wekit变换：旋转（-90度）；
-webkit变换：旋转（-90度）；
变换：旋转（-90度）；
}
.有大菜单a:悬停{
颜色：#03A9F4；
空白：正常；
文字装饰：无；
}
.修理{
溢出：隐藏；
}
.ht下拉列表{
背景：#fff；
左：0；
不透明度：0；
填充：10px 20px；
位置：绝对位置；
最高：100%；
-webkiit变换：scaleY（0）；
-webkit转换：scaleY（0）；
变换：scaleY（0）；
-webkit转换原点：0；
变换原点：0；
宽度：150px；
文本对齐：左对齐；
可见性：隐藏；
z指数：9999999；
-webkit转换：0.5s；
过渡：0.5s；
-webkit盒阴影：0 0 6px 0 rgba（0,0,0,0.2）；
-ms盒阴影：0 0 6px 0 rgba（0,0,0,0.2）；
盒影：0.0 6px 0 rgba（0,0,0,0.2）；
}
.sub-menu.mega-menu{
左：100%；
填充：0；
排名：0；
背景色：#ffffff；
}
.sub-menu.mega-menu.row.mega col{
显示：内联块；
位置：相对位置；
垂直对齐：顶部；
宽度：20%；
身高：100%；
溢出：隐藏；
}
.sub-menu.mega-menu.mega内容：最后一个孩子{
边界：中等无；
页边距底部：0；
填充底部：0；
}
.sub-menu.mega-menu.mega项目标题{
字体大小：13px；
字体系列：无衬线；
文本对齐：左对齐；
字号：500；
溢出：隐藏；
文本溢出：省略号；
}
菜单{
浮动：左；
}
.megamenu ul{
位置：相对位置；
保证金：0；
填充：0 15px；
}
.有超大菜单ul.menu>li.menu项{
宽度：100%；
浮动：无；
文本对齐：左对齐；
填充：0 10px；
}
.主菜单ul li a、.megamenu ul li a{
显示：块；
线高：1.5；
字体大小：12px；
}
.菜单隐藏{
显示：无；
}
所有类别
-
-
var cbpHorizontalMenu = (function () {
var b = $("#cbp-hrmenu > ul > li"),
g = b.children("a"),
c = $("body"),
d = -1;
function f() {
g.on("mouseover", a);
b.on("mouseover", function (h) {
h.stopPropagation()
})
}
function a(j) {
if (d !== -1) {
b.eq(d).removeClass("cbp-hropen")
}
var i = $(j.currentTarget).parent("li"),
h = i.index();
if (d === h) {
i.removeClass("cbp-hropen");
d = -1
} else {
i.addClass("cbp-hropen");
d = h;
c.off("click").on("click", e)
}
return false
}
function e(h) {
b.eq(d).removeClass("cbp-hropen");
d = -1
}
return {
init: f
}
})();
$(function () {
cbpHorizontalMenu.init();
});