sub-menu per Klick

  • HHallo zusammen,ich habe Probleme mit der Logik vom Wordpress Menü.
    Vermutlich ganz einfach. Die Top Menüpunkte sind "leer". Bei Klick darauf soll sich das sub-menu öffnen. Das Menü ist übers Backend angelegt. regsiter_nav_menu in der funktion.php und Ausgabe über wp_nav_menu.Ich habe für die "Klick-Funktion" keine Lösung über css hinbekommen und daher ein kleines script:

    Code
    <script>
      $(document).ready(function() {
        $("li.menu-item-has-children").click(function() {
          $("ul.sub-menu").slideToggle("fast");
          $("ul.menu li.menu-item-has-children").toggleClass("current-menu-item");
         });
       });
    </script>


    Eigentlich logisch, aber jetzt öffnen sich beim Klick auf einen Punkt mit sub-menu die sub-menus von allen Punkten die eins besitzen.
    Ich check grad einfach nicht, wie ich dies umgehen kann.

    Kann mir wer helfen? Ich habe leider keinen Link (local) aber anbei ist ein Screenshot der hoffentlich hilft.
    Würde mich sehr über Hilfe freuen, habe hier zwar einiges zum Thema gefunden aber nichts was mir konkret hilft.Vielen Dank!!

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • DANKE!

    Falls wer ähnliches sucht, hab das Script leicht abgeändert und jetzt ists genau so wie es sein soll:

    Code
    <script>
            $(document).ready(function() {
                $("li.menu-item-has-children").click(function() {
                   $(this).closest("li").find(".sub-menu").slideToggle("fast");
                   $(this).closest("ul.menu li.menu-item-has-children").toggleClass("current-menu-item");
                });
            });
    </script>
  • Ergänzung!
    Die überarbeitet Version ist diese hier:

    Code
    <script>
            $(document).ready(function() {
                $("li.menu-item-has-children").click(function() {
                   $(this).closest("li").find(".sub-menu").slideToggle("slow");
                   $(this).closest("li").toggleClass("current-menu-item").siblings().removeClass("current-menu-item");
                   $(this).closest("li").siblings().find(".sub-menu").slideUp("slow");
                });
               
            });
    </script>

    Jetzt gehen die aktiven sub-menüs wieder weg, wenn auf einen anderen Menüpunkt geklickt wird.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!