jquery - Bootstrap sub-nav open on nav hover -
i have menu , submenu. achieved hover on menu opens submenu when mouse moves submenu, gets closed.
i have added jsfiddle html/js have made. know missing something, cant find it.
jsfiddle: https://jsfiddle.net/64r4s8ok/2/
here 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
you omit second handler .opensubmenuonhover
won't close if hover-out.
then apply handler hover-out event of container. close if hover-out 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 think?
edit 1: answer works hiding ul opened before opening desired ul
here 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"); } );
Comments
Post a Comment