Witam serdecznie,
Chciałem stworzyć sobie na stronie wielopoziomowe rozwijane menu oparte na znacznikach ul i li.
Mam jednak problem, gdyż rozwija mi się tylko pierwszyy poziom drzewa, następnego nie mogę otworzyć żadnym sposobem.
Wiem, że pewnie nie jest to super trudne ale uczę się dopiero JS i byłbym wdzięczny jakąkolwiek pomoc.

Podaję to co mam, nie jest tego za dużo, ale zawsze coś:

[HTML] pobierz, plaintext 
$(document).ready(function () {
$('li ul').hide()
    $("li").click(function () {
        $('li > ul').not($(this).children("ul").toggle()).hide();
    });
});
[HTML] pobierz, plaintext 

Najpierw ukrywam wszystko, a potem za pomocą toggle() ukrywam/pokazuje potomka, problem w tym, jak mam "złapać" potomka potomka?

Nie bardzo rozumiem co ten fragment ma robić…

https://jsfiddle.net/tyjp7rw5/1/

Przydalo by sie tu dodac lvl i podmiane po kliknieciu ale to zostawie juz Tobie

@rad11 przekombinowane. Poza tym nie zachowujesz struktury drzewka.
Można to łatwo oprzeć na event delegation: https://jsfiddle.net/Comandeer/89pLuu3L/5/

Fakt

Super, działa prawie tak jak chciałem z tą różnicą, że u Ciebie Comandeer menu rozwija się również jak kliknę "A", u mnie natomiast tylko jak trafię na znak punktora.

Jakieś sugestie?

A masz jakieś span czy coś wewnątrz tego li?

Nie mam, strona stoi na wordpressie i do tego li zostało automatycznie podporządkowane jakieś tam id typu "menu-item-12".

Poczytam bo to pewnie coś w css.

Dzięki za pomoc

EDIT: Usunąłem wszystkie style i wciąż rozsuwanie nie działa gdy nacisnę na tekst, wie ktoś dlaczego?
Mam w środku tego <li> jeszcze <a> ale puste, bo w taki sposób w Wordpressie uzyskałem efekt rozwijanego menu, znaczy dodaje stronę i usuwam z niej adres, potem podpinam pod nią inne podstrony i mam strukturę drzewa jednak znacznik <a> pozostaje. Macie może jakiś pomysł?

Jeśli w tym li jest a, to klikając na tekst klikasz na link, a nie element listy. Z tego powodu mój skrypt nie działa. Musisz sprawdzać czy e.target to li - jeśli nie, to pobierz jego rodzica i wówczas powinno działać

[HTML] pobierz, plaintext 
if ( e.target.is( "li" ) ) 
 {
    var li = e.target
    jQuery(li).children('ul').toggle();
 } else
...
 
[HTML] pobierz, plaintext 

Coś takiego?
Nie wiem za bardzo co rozumiesz przez pobranie rodzica, a to powinno być w miejscu kropek,prawda?

Raczej coś typu:

Pogubiłem się,

W którym miejscu powinienem to sprawdzać?

[HTML] pobierz, plaintext 
$(document).ready(function()
{
    jQuery('li ul').hide()
    $('.menu').on('click', function(e)
    {
        var li = e.target;       ///zamiast tych 2 linijek?
        $(li).children('ul').toggle();
    });
});
 
[HTML] pobierz, plaintext 

Tsk, zamiast nich.

Dobra wielkie dzięki za zaangażowanie, wszystko działa jak chciałem:)



A gdybym chciał zrobić coś takiego, że każdy z elementów jest linkiem prowadzącym do konkretnej podstrony a po przejściu i wczytaniu podstrony widoczne zostają jego dzieci( czyli ta gałąź zostaje rozwinięta)

W ogóle to co możecie polecić do nauki js? Jakieś tutoriale i kursy online czy raczej zaopatrzyć się w jakąś lekturę papierową?