问尝试使主题下拉菜单OnClick而不是悬停
EN

Stack Overflow用户

提问于 2016-07-28 09:10:24

回答 2查看 9.9K关注 0票数 9

对不起，如果这是给任何人的dup，管理员让我把它移到溢出。

我正在使用DIVI主题，并对其进行了一些相对简单的修改，以更好地满足我的需要。有一件事，我有一些困难，但令人惊讶的是，交换它的垂直菜单的悬停状态下拉到onclick功能。

我在下面列出了一个代码示例：JSFIDDLE

$('ul.top-menu').children('.menu-item-has-children').click(function(){
    $(this).children('.sub-menu').slideToggle('slow');
}).children('ul').find('.menu-item').click(function (event) { //select all the `.child` elements and stop the propagation of click events on the elements
    event.stopPropagation();
    return false;
});

奇怪的是，我似乎无法从菜单中删除悬停状态功能。在这里可以找到DIVI的一个例子：DIVI

注意:您需要转到导航中的标题，并选择黑暗的垂直导航来复制我的布局。

提前谢谢你的想法！

wordpress

drop-down-menu

navigation

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-08-04 05:53:46

主题开发人员生成了一个生成所需结果的结果。对DIVI页面导航功能的更改是在DIVI文件夹目录/includes/builder/scripts/frontend-builder-scripts.js中找到的名为前端构建器-scripts.js的文件中完成的。

若要更改悬停，请单击从.hover到.click的第1074行(最下面的行)中找到的以下代码。

$et_top_menu.find( 'li' ).hover( function() {
     if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
     $(this).addClass( 'et-show-dropdown' );
     $(this).removeClass( 'et-hover' ).addClass( 'et-hover' );
            et_menu_hover_triggered = true;
}

至

$et_top_menu.find( 'li' ).click( function() {
     if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
     $(this).addClass( 'et-show-dropdown' );
     $(this).removeClass( 'et-hover' ).addClass( 'et-hover' );
            et_menu_hover_triggered = true;
}

票数 1

Stack Overflow用户

发布于 2016-08-02 06:49:10

通常，您应该使用主题用来管理显示和隐藏菜单的类来保持它的兼容性。

代码可用于悬停菜单(custom.js):

var $et_top_menu = $( 'ul.nav' );

$et_top_menu.find( 'li' ).hover( function() {
    if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
        $(this).addClass( 'et-show-dropdown' );
        $(this).removeClass( 'et-hover' ).addClass( 'et-hover' );
    }
}, function() {
    var $this_el = $(this);

    $this_el.removeClass( 'et-show-dropdown' );

    setTimeout( function() {
        if ( ! $this_el.hasClass( 'et-show-dropdown' ) ) {
            $this_el.removeClass( 'et-hover' );
        }
    }, 200 );
} );

如何解除触发悬停事件#1的绑定(如果您想在custom.js初始化后在其他地方执行此操作)：

 $( 'ul.nav li' ).off("hover");

如何解除触发悬停事件#2的绑定(如果您想在代码之后修改custom.js )：

$et_top_menu.find( 'li' ).off("hover");

如何解除触发悬停事件#3的绑定(如果您想修改custom.js :

只需删除该代码并将其替换为单击事件代码即可。

如何使单击事件-如果您想保留以前的悬停代码-通过在悬停代码下面或使用它在您的位置-注意它必须在custom.js之后或在悬停代码之后使用：

$( 'ul.nav li' ).off("hover");

$et_top_menu.find( 'li' ).click( function() {
    if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
        $(this).toggleClass( 'et-show-dropdown' );
        $(this).toggleClass( 'et-hover' );
    }
});

我给你的代码没有任何信息，所以你自己去做吧。最简单的方法是使用CSS，例如：

<YOUR SELECTOR> {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}