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

不想你离开。 提交于 2020-12-15 06:38:43

问题


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

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