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

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的第二个处理程序，以便在悬停时它不会关闭。

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

喜欢这个：

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