Rozsuwane menu wielopoziomowe., Pomoc z skrypcie Opcje

[Leon1409]

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?

[Comandeer]

Kod

not($(this).children("ul").toggle())

Nie bardzo rozumiem co ten fragment ma robić…

[rad11]

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

Przydalo by sie tu dodac lvl i podmiane po kliknieciu ale to zostawie juz Tobie (IMG:style_emoticons/default/wink.gif)

Ten post edytował rad11 18.05.2015, 20:07:34

[Comandeer]

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

[rad11]

Fakt (IMG:style_emoticons/default/wink.gif)

[Leon1409]

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?

[Comandeer]

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

[Leon1409]

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 (IMG:style_emoticons/default/smile.gif)

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ł?

Ten post edytował Leon1409 19.05.2015, 13:54:01

[Comandeer]

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ć

[Leon1409]

[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?

[Comandeer]

Raczej coś typu:

Kod

var target = $(e.target)
,li = target.is('li') ? target : target.parent('li');
li.children('ul').toggle();

[Leon1409]

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 

[Comandeer]

Tsk, zamiast nich.

[Leon1409]

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ą?