时间戳

首页 > 解决方案 > 如何让 WordPress 中的 Divi 主题下拉菜单保持打开状态，直到我点击？

wordpress - 如何让 WordPress 中的 Divi 主题下拉菜单保持打开状态，直到我点击？

问题描述

我有一个使用 Divi 主题的 WordPress 网站。我在导航栏中有一个下拉菜单，我想保持打开状态，直到我用鼠标单击某处。我的麻烦是，我不理解下拉菜单的 CSS。我不知道使用哪个 CSS 类以编程方式打开/关闭下拉菜单。

下拉菜单是页面右上角的石灰绿色，标签为“Våra erbjudanden”，请参见屏幕截图： 在此处输入图像描述

简而言之，哪些 Divi 类用于切换下拉菜单？你会怎么做呢？

谢谢！

标签： wordpressnavigationwordpress-themingdropdowndivi

解决方案

要使悬停后下拉菜单保持打开状态，您可以使用以下代码：

jQuery(document).ready(function() {
    spriderMain.run();
});

var spriderMain = {

    run() {
        document.addEventListener('click', this.onAnyClick, true); 
        this.fixDropdown();
    },

    fixDropdown() {
        var dropdown = document.querySelectorAll("nav > ul > li")[1];
        dropdown.addEventListener("mouseover", this.onDropdownMouseOver);
    },

    onAnyClick() {
        setTimeout(function() {
            var dropdown = document.querySelectorAll("nav > ul > li > ul")[0];
            dropdown.style.visibility = "hidden";
            dropdown.style.opacity = "0";
            var dropdownBox = document.querySelectorAll("nav > ul > li")[1];
            dropdownBox.style.pointerEvents = "auto";
            dropdown.style.pointerEvents = "auto";
        }, 100);
    },

    onDropdownMouseOver() {
        var dropdown = document.querySelectorAll("nav > ul > li > ul")[0];
        dropdown.style.visibility = "visible";
        dropdown.style.opacity = "1";
    }
};

但是，一个问题可能会导致下拉菜单在悬停时重新打开，尽管它已经打开了。这个问题在这里讨论： 当已经在 WordPress Divi 主题站点中打开时，如何防止下拉菜单再次动画/重新打开？

推荐阅读