php WordPress主题：顶部父级不可点击&不链接到移动的菜单上的折叠嵌套项页面

zqdjd7g9 于 2023-08-02 发布在 PHP

关注(0)|答案(2)|浏览(113)

Divi在媒体屏幕宽度小于1025 px时自动呈现移动的菜单。默认情况下，所有菜单项（包括子菜单项）都以完全展开的视图显示，所有菜单项都在列表中。
问题是，父级菜单项不再链接到自己的网页。换句话说，在具有嵌套子菜单的父菜单项上轻敲仅扩展或折叠子菜单，即使父菜单本身导致有效的网页URL，基本上阻止访问者访问网页。
我已经尝试了this修复我找到在线，但它不工作。

function setup_collapsible_submenus() {
        var $menu = $('#mobile_menu'),
            top_level_link = '#mobile_menu .menu-item-has-children > a';

        $menu.find('a').each(function() {
            $(this).off('click');

            if ( $(this).is(top_level_link) ) {
                if ($(this).parent().hasClass('always-visitable')) {
                    $('<a class="hover-link"></div>')
                    .attr('href', $(this).attr('href'))
                    .on('click', function(e){ e.stopPropagation(); })
                    .appendTo($(this));
                }

                $(this).attr('href', '#');
            }

            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.mobile_nav').trigger('click');
                });
            } else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).parent().toggleClass('visible');
                });
            }
        });
    }

    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });

})(jQuery);
</script>

**Also the CSS:**

#main-header .et_mobile_menu .always-visitable {
    position: relative;
}
#main-header .et_mobile_menu .always-visitable .hover-link {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    right: 60px; /* right area continues to expand or collapse */

字符串

php

来源：https://stackoverflow.com/questions/56509095/divi-wordpress-theme-top-parent-level-not-clickable-does-not-link-to-page-on

2条答案

按热度按时间

a5g8bdjr1#

转到Divi主题选项>导航>常规设置>禁用顶层下拉菜单链接。

赞(0）回复(0）举报 2023-08-02

1cklez4t2#

如果有人正在寻找替代解决方案，我使用this post作为参考来修改菜单行为：
它基本上是在顶层菜单项中添加了一个额外的 * * 元素。原始的wrapper a 元素切换下拉列表，并且仅当在内部 a 元素（相对于wrapper a 元素绝对定位）外部单击该元素时才会触发。
我把修改过的代码放在这里。注意实现中的类选择器，它们可能会有所不同。

<!-- Make top level menu items clickable and side button to display the dropdown -->
<style type="text/css">
.et_slide_in_menu_container .et_mobile_menu .menu-item-has-children > a { 
    background-color: transparent; 
    position: relative; 
}

.et_slide_in_menu_container .et_mobile_menu .always-visitable {
    position: relative;
}
.et_slide_in_menu_container .et_mobile_menu .always-visitable .hover-link {
    position: absolute;
    top: 0; 
    left: 0; 
    bottom: 0;
    right: 60px; /* right area continues to expand or collapse */
    width: calc(100% - 2rem);
    height: 100%;
}
</style>
<script type="text/javascript">
(function($) {
      
    function setup_collapsible_submenus() {
        console.log("Menu script loaded!")
        //
        var $menu = $('#mobile_menu_slide'),
            top_level_link = '#mobile_menu_slide .menu-item-has-children > a';
             
        $menu.find('a').each(function() {
            $(this).off('click');
              
            if ( $(this).is(top_level_link) ) {
                if ($(this).parent().hasClass('always-visitable')) {
                    $('<a class="hover-link"></div>')
                    .attr('href', $(this).attr('href'))
                    .on('click', function(e){ e.stopPropagation(); })
                    .prependTo($(this));
                }

                $(this).attr('href', '#');
            }
              
            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.mobile_nav').trigger('click');
                });
            } else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).parent().toggleClass('visible');
                });
            }
        });
    }
      
    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });
 
})(jQuery);
</script>

字符串

赞(0）回复(0）举报 2023-08-02

我来回答

php WordPress主题：顶部父级不可点击&不链接到移动的菜单上的折叠嵌套项页面

2条答案

相关问题

热门标签

最新问答