I want the submenu to stay open.

Hi there,

Is your menu in sidebar? David's script only works when the menu is in the sidebar.

yes it's in the sidebar
Click submenu ①

Click submenu 2 to close

Script setting screen 1

Script setting screen 2

Hi Urah,

For reference, can you provide the link to where we can see this menu on your site?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hello. Nice to meet you.

The Script there in the link you provided works to keep the "Curent page" sub-menu open.

To clarify, are you wanting to keep a sub-menu opened until it's closed regardless of which page is opened?

>The Script there in the link you provided works to keep the “Curent page” sub-menu open.
understood

>To clarify, are you wanting to keep a sub-menu opened until it’s closed regardless of which page is opened?
I don't want it to stay open from the start.
I want it to close and open on click.

Click ABOUT to open a submenu.
If you click "WORKS" in that state, the submenu will open, but "ABOUT" will be closed.

I want to prevent the "ABOUT" submenu from closing even if I click "WORKS" while the "ABOUT" submenu is open.

I would like to achieve a state like this.

I would be happy if you could lend me your strength

Hi there,

that toggle function is baked into the dropdown-click script, so it cannot be overwritten.
to make that happen you would need to:

1. Remove the dropdown-click Javscript using this PHP Snippet:

add_action( 'wp_enqueue_scripts', 'tu_remove_menu_scripts', 50 );
function tu_remove_menu_scripts() {
    wp_dequeue_script('generate-dropdown-click');
}

2. Then hook in your own script that doesn't close the closest opened element. I hacked our script to do that:

! function () {
    "use strict";
    if ("querySelector" in document && "addEventListener" in window) {
        var r = document.body,
            t = function (e, t) {
                e.preventDefault(), e.stopPropagation();
                var n = (t = t || this).closest("li"),
                    o = t.closest("nav").querySelectorAll("ul.toggled-on");
                if (o && !t.closest("ul").classList.contains("toggled-on") && !t.closest("li").classList.contains("sfHover"))

                n.classList.toggle("sfHover");
                e = n.querySelector(".dropdown-menu-toggle");
                "false" !== e.getAttribute("aria-expanded") && e.getAttribute("aria-expanded") ? e.setAttribute("aria-expanded", "false") : e.setAttribute("aria-expanded", "true"), e = n.querySelector(".sub-menu") ? ".sub-menu" : ".children", r.classList.contains("dropdown-click-menu-item") ? t.parentNode.querySelector(e).classList.toggle("toggled-on") : r.classList.contains("dropdown-click-arrow") && n.querySelector(e).classList.toggle("toggled-on")
            },
            e = document.querySelectorAll(".main-nav .menu-item-has-children > a");
        if (r.classList.contains("dropdown-click-menu-item"))
            for (o = 0; o < e.length; o++) e[o].addEventListener("click", t, !0);
        if (r.classList.contains("dropdown-click-arrow")) {
            for (o = 0; o < document.querySelectorAll(".main-nav .menu-item-has-children > a").length; o++) "#" === document.querySelectorAll(".main-nav .menu-item-has-children > a")[o].getAttribute("href") && document.querySelectorAll(".main-nav .menu-item-has-children > a")[o].classList.add("menu-item-dropdown-click");
            for (var n = document.querySelectorAll(".main-nav .menu-item-has-children > a .dropdown-menu-toggle"), o = 0; o < n.length; o++) n[o].addEventListener("click", t, !1), n[o].addEventListener("keydown", function (e) {
                "Enter" === e.key && t(e, this)
            }, !1);
            for (o = 0; o < document.querySelectorAll(".main-nav .menu-item-has-children > a.menu-item-dropdown-click").length; o++) document.querySelectorAll(".main-nav .menu-item-has-children > a.menu-item-dropdown-click")[o].addEventListener("click", t, !1)
        }

        document.addEventListener("click", function (e) {
            e.target.closest(".sfHover") || l()
        }, !1), document.addEventListener("keydown", function (e) {
            "Escape" === e.key && l()
        }, !1)
    }
}();

Mr. David

It worked. Sincerely thank.
Thank you for providing such great technology.

Glad to hear that :)