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

注意：您需要转到导航中的标题，然后选择深色垂直导航来复制我的布局。

提前感谢您的想法！

Answer 1

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

对于HOVER MENU（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; }

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

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

我添加了一些CSS类，以使其与主题css类兼容。我添加了＆＃34; nav＆＃34;父母UL的课程就像你的主题一样，我添加了＆＃34; mega-menu＆＃34;类似于你主题中的ul.sub-menu的li父级。

Answer 2

主题开发人员产生了产生所需结果的结果。交换DIVI页面导航功能的更改是在DIVI文件夹目录/includes/builder/scripts/frontend-builder-scripts.js中标题为frontend-builder-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;
}

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

2 个答案: