我有菜单和子菜单。我实现了鼠标在菜单上的悬停,打开了子菜单,但是当鼠标移动到子菜单时,它就关闭了。
我为我所做的html/js添加了jsfiddle。我知道我错过了什么,但找不到。
小提琴手:https://jsfiddle.net/64r4s8ok/2/
以下是js脚本:
$(".openSubmenuOnHover").hover(
function () {
var thisdiv = $(this).attr("data-target")
$(thisdiv).collapse("show");
//$(thisdiv).show("slow");//("show");
},
function () {
var thisdiv = $(this).attr("data-target")
$(thisdiv).collapse("hide");
//$(thisdiv).hide();//("hide");
}
);
问候
发布于 2016-01-28 11:16:04
您可以省略.openSubmenuOnHover
的第二个处理程序,这样如果悬停,它就不会关闭。
然后将处理程序应用于其容器的悬停事件。因此,只有当您悬停整个菜单时,它才会关闭。
如下所示:
$(".openSubmenuOnHover").hover(
function () {
var thisdiv = $(this).attr("data-target");
$(thisdiv).collapse("show");
//$(thisdiv).show("slow");//("show");
},
null
);
$(".containerOf-openSubmenuOnHover").hover(
null,
function () {
var thisdiv = $(".openSubmenuOnHover").attr("data-target");
$(thisdiv).collapse("hide");
//$(thisdiv).hide();//("hide");
}
);
你认为如何?
编辑1:这个答案通过隐藏在打开所需的UL之前打开的任何UL来工作。
下面是脚本更新:
$(".openSubmenuOnHover").hover(
function () {
$(".sub-navbar > ul").each(function (){
$(thisdiv).collapse("hide");
}
var thisdiv = $(this).attr("data-target");
$(thisdiv).collapse("show");
//$(thisdiv).show("slow");//("show");
},
null
);
$(".containerOf-openSubmenuOnHover").hover(
null,
function () {
var thisdiv = $(".openSubmenuOnHover").attr("data-target");
$(thisdiv).collapse("hide");
//$(thisdiv).hide();//("hide");
}
);
https://stackoverflow.com/questions/35059797
复制相似问题