CODEWITHSUNDEEP
jquerytwitter-bootstrap
Kasparov92
Kasparov92

Reputation: 1384

Bootstrap sub-nav open on nav hover

I have a menu and submenu. I achieved the hover on the menu opens the submenu but when the mouse moves to the submenu, it gets closed.

I have added jsfiddle for the html/js I have made. I know I am missing something, but cant find it.

jsfiddle: https://jsfiddle.net/64r4s8ok/2/

Here is the js script:

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

Regards

Upvotes: 1

Views: 68

Answers (1)

GigiSan
GigiSan

Reputation: 1282

You could omit the second handler for .openSubmenuOnHover so it won't close if you hover-out.

Then apply a handler to the hover-out event of its container. So it will close only if you hover-out the entire menu.

Like this:

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

What do you think?

EDIT 1: This answer works by hiding any UL opened before opening the desired UL

Here is the script update:

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

Upvotes: 1

Related Questions