如何在WordPress中使Divi主题下拉列表保持打开状态，直到单击为止?

问题描述

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

这是我正在工作的网站:

因此，简而言之，使用哪个Divi类切换下拉菜单?您将如何去做?

谢谢！

解决方案

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

  jQuery(document).ready(function(){spriderMain.run();});var spriderMain = {跑步() {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 =隐藏"；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主题网站中打开后，如何防止下拉菜单再次进行动画/重新打开?

I have a WordPress site using the Divi theme. I have a dropdown in the navbar that I want to stay open until I click somewhere with the mouse. My trouble is, I don't understand the CSS of the dropdown. I don't know which CSS class to use for opening/closing the dropdown programatically.

Here is the site that I'm working on:https://sprider.se.knowe.work/

The dropdown is the lime green one in the top right of the page with label "Våra erbjudanden", see the screenshot:

So in short, which Divi classes are used to toggle dropdowns? How would you go about doing this?

Thanks!

解决方案

To make the dropdown stay open after hover, you can use the following code:

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

However, a problem might cause the dropdown to reopen on hover, although it already has been opened. This issue is discussed here:How can I prevent the dropdown from animating/reopening again when already open in WordPress Divi theme site?

这篇关于如何在WordPress中使Divi主题下拉列表保持打开状态，直到单击为止?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！