尝试制作主题下拉菜单 OnClick 而不是悬停

Question

[抱歉，如果这对任何人来说都是骗局，管理员要求我将其移至溢出]

我正在使用 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

注意：您需要转到导航中的 headers 并选择深色垂直导航来复制我的布局。

提前感谢您的想法！

Answer 1

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

悬停菜单的代码（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");

HOW TO UNBIND TRIGGERING HOVER EVENT #2 (if you want to modify custom.js right after the code):

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

HOW TO UNBIND TRIGGERING HOVER EVENT #3 (if you want to modify 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;
}

FIDDLE 示例 - 它关闭 HOVER 事件并设置 ON CLICK 事件。

http://jsfiddle.net/gwn9aqxs/2/

我添加了一些 CSS classes 以使其与您的主题 css classes 兼容。我将 "nav" classs 添加到父级 UL 就像在你的主题中一样，我将 "mega-menu" class 添加到 ul.sub-menu 的 li 父级就像你主题。

Answer 2

主题开发人员生成了一个生成所需结果的结果。交换 DIVI 页面导航功能的更改是在 DIVI 文件夹目录 /includes/builder/scripts/frontend-builder-scripts.js

中找到的名为 frontend-builder-scripts.js 的文件中完成的

要更改悬停以单击，请将第 1074 行（下面的第一行）中的以下代码从 .hover 替换为 .click。

$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;
}

尝试制作主题下拉菜单 OnClick 而不是悬停

Trying to make theme dropdown menu OnClick instead of hover

navigation

wordpress

drop-down-menu