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

Posted 2023-04-13

【中文标题】试图使主题下拉菜单 OnClick 而不是悬停

【英文标题】：Trying to make theme dropdown menu OnClick instead of hover

【发布时间】：2016-12-03 05:19:27

【问题描述】：

[对不起，如果这是对任何人的重复，管理员要求我将其移至溢出]

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

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

提前感谢您的想法！

【问题讨论】：

你只需要删除悬停状态吗？

我需要将菜单的悬停状态替换为点击状态。我已经浏览了样式表并在之前的努力中删除了悬停状态以解决更改，但是，没有任何乐趣。

【参考方案1】：

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

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

HOW TO UNBIND TRIGGERING HOVER EVENT #1（如果您想在 custom.js 中初始化后在其他地方执行此操作）：

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

HOW TO UNBIND TRIGGERING HOVER EVENT #2（如果您想在代码之后立即修改 custom.js）：

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

HOW TO UNBIND TRIGGERING HOVER EVENT #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 示例 - 它关闭 HOVER 事件并设置 ON CLICK 事件。

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

我添加了一些 CSS 类以使其与您的主题 css 类兼容。我向父 UL 添加了“nav”类，就像在您的主题中一样，我向 ul.sub-menu 的 li 父级添加了“mega-menu”类，就像在您的主题中一样。

【讨论】：

感谢您的跟进。确实是一个很好的答案，遗憾的是它在 DIVI 中没有按预期解决。我之前曾尝试通过主题开发者的建议进行非常类似的调整，但是由于某种原因，悬停状态仍然存在并忽略了切换到单击状态的请求。

尝试调用 $( 'ul.nav li' ).off("hover");并使用 alert(1) 设置简单的点击事件；试试吧。不工作是不可能的：）你能给我网站的地址吗？

最重要的是放在它初始化之后（在custom.js中）。请记住，custom.js 中的代码在 $(document).ready( function()

我无法分享该网站的地址，但这里有一个链接显示您在 custom.js 中的代码。 emailimagestorage.com/capture-1.png 一切看起来都像你认为的那样？

【参考方案2】：

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

要将悬停更改为单击，请将第 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;

【讨论】：

更改主题文件不是好习惯——任何更新都会覆盖更改。最好在安全区域扩展功能。主题选项提供了这一点，最好在结束正文标记之前添加自定义脚本。解开悬停并附加点击事件是正确的解决方案。