问题
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