How can I make a Divi theme dropdown in WordPress stay open until I click?

一世执手 提交于 2021-01-07 06:35:35

问题


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!


回答1:


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?



来源:https://stackoverflow.com/questions/64858186/how-can-i-make-a-divi-theme-dropdown-in-wordpress-stay-open-until-i-click

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!