При наведении курсора на Subnav закрывается родительская навигация из-за JavaScript - PullRequest
0 голосов
/ 27 февраля 2019

У меня есть навигация, все работает, и я пытаюсь получить подменю, отображаемое, когда родительский элемент li a находится при наведении курсора.

Код до того, как он работал, прекрасно работает по событию клика элемента.Но если я изменяю тип события на .on( 'hover', то подменю отображается при наведении курсора, но при наведении указателя мыши на подменю родительский элемент закрывается, поскольку он теряет класс .show.

Что я здесь не так делаю?

$( document ).ready( function () {
        $( '.dropdown-menu a.menu-item-has-children' ).on( 'click', function ( e ) {
            var $el = $( this );
            var $parent = $( this ).offsetParent( ".dropdown-menu" );
            if ( !$( this ).next().hasClass( 'show' ) ) {
                $( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" );
            }
            var $subMenu = $( this ).next( ".dropdown-menu" );
            $subMenu.toggleClass( 'show' );

            $( this ).parent( "li" ).toggleClass( 'show' );

            $( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {
                $( '.dropdown-menu .show' ).removeClass( "show" );
            } );

             if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
                $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
            }

            return false;
        } );
    } );

Используя этот скрипт и можно заставить работать щелчок, только не при наведении курсора https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-hover-navbar/

...