Question

我有一个菜单和子菜单。我在菜单上实现了悬停打开子菜单，但当鼠标移动到子菜单时，它会被关闭。

我为我制作的html / js添加了jsfiddle。我知道我错过了一些东西，但无法找到它。

的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");
    }
);

此致

Answer 1

您可以省略{...}的第二个处理程序，以便在您将鼠标悬停时不会关闭。

然后将处理程序应用于其容器的悬停事件。因此，只有当您将整个菜单悬停时，它才会关闭。

像这样：

.openSubmenuOnHover

您怎么看？

编辑1：这个答案通过隐藏在打开所需的UL之前打开的任何UL来实现

以下是脚本更新：

$(".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");
    }
);

在导航悬停时打开Bootstrap子导航

1 个答案: