Question

我有一个导航栏，该导航栏所有工作，并试图在悬浮父项li a时显示一个子菜单。

之前的代码对项目的click事件有效。但是，如果我将事件类型更改为.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/

将鼠标悬停在Subnav上会由于JavaScript

0 个答案: