[Resolved] I want the submenu to stay open.

[urah1984]

If I open submenu 1 and then open another submenu 2, submenu 1 closes.

How can I keep both open?
I tried this article and it didn’t work.

https://generatepress.com/forums/topic/sidebar-menu-design-and-functionality/#post-2133207

[Ying]

Hi there,

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

[urah1984]

yes it’s in the sidebar
Click submenu ①

Click submenu 2 to close

Script setting screen 1

Script setting screen 2

[Fernando]

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

[urah1984]

Hello. Nice to meet you.

[Fernando]

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?

[urah1984]

>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

[David]

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

[urah1984]

Mr. David

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

[David]

Glad to hear that 🙂

[Author]

Posts