How can I prevent the dropdown from animating/reopening again when already open in WordPress Divi theme site?

问题

I'm working on a WordPress site with the Divi theme. When I hover the dropdown in the nav bar, it stays open and closes on click as desired. But the last problem now is that if you hover the dropdown again when it's already open, it animates again. In short, it opens again when already open. How can I prevent it from reopening when it's already open?

Site: https://sprider.se.knowe.work/

JS code for customizing the behaviour of the dropdown:

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

var spriderMain = {

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

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

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

            console.log("hover detected!");


            // dropdownBox.style.pointerEvents = "none";
            dropdownBox.style.transition = "none";
            dropdownBox.style.transform = "none";
            // dropdown.style.pointerEvents = "none";
            dropdown.style.transition = "none";
            dropdown.style.transform = "none";

            var links = dropdown.querySelectorAll("a");
            console.log(links);
            for (var i = 0; i < links.length; i++) {
                console.log(links[i]);
                links[i].style.transition = "none";
                links[i].style.transform = "none";
            }
        }, 500);
    },

    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);
    },

};

Screenshot of the dropdown:

Thanks!

Edit (explanation why it's not the same question as the suggested one): This question is more specific about preventing the dropdown from reopening. Keeping it open after hover has already been solved. I will give the answer in the suggested question in case it helps others and to mark it as solved/answered. Will go there and answer it now.

来源：https://stackoverflow.com/questions/64881099/how-can-i-prevent-the-dropdown-from-animating-reopening-again-when-already-open