У меня есть навигация, все работает, и я пытаюсь получить подменю, отображаемое, когда родительский элемент 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/