Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

Multi-level dropdown menu probleem (Opgelost)

Jointjeff - 05/05/2014 03:54
HTML interesse		Hallo iedereen, Ik wil met een submenu het volgende bereiken. - Je klikt op het plusje en het submenu wordt weergeven. Dit kan ook een submenu in een submenu (multi-level) zijn. - Als je op een plusje klikt moeten alle andere submenus dichtklappen. Uiteraard wanneer dit een submenu in een submenu is, moet de bovenliggende dus gewoon open blijven staan. Echter lukt me dat niet. Ik kan zo niet bedenken hoe ik dat moet realiseren. Zie ook mijn jsFiddle voor een beter beeld: http://jsfiddle.net/6EfeZ/1/ Hopende op hulp!

4 antwoorden

Gesponsorde links

Thomas - 05/05/2014 10:25
Moderator		Hiermee zul je wat moeten experimenteren, maar hier zijn wat tips die mogelijk helpen: * regel 15 van je HTML heeft een typefout (</i> in plaats van </li>) * regel 13 van je JavaScript zorgt ervoor dat alles ingeklapt wordt, waarschijnlijk wil je dat niet, misschien werkt de volgende strategie beter in je click event: - verwijder eerst alle active classes - voeg aan het element dat je uit wilt klappen (gebruik $(this)) de active class toe - weet niet of dit kan, maar als je met een selector elementen kunt selecteren die de active class NIET hebben (een soort van negatie dus), dan kun je dit gebruiken om alle overige elementen in te klappen; of misschien nog simpeler, klap gewoon ALLES in - klap vervolgens (of tegelijkertijd) het element met de active class uit Mogelijk moet je wel op meerdere niveau's een active class aan blijven houden als je een meerdimensionaal menu hebt, dus ik weet niet of je zomaar alle classes kunt verwijderen. Misschien moet je het uitgeklapte "pad" bijhouden in een stack ofzo, of je laat ze gewoon uitgeklapt. Ook kun je nu uitgeklapte elementen niet meer inklappen, die blijven heen en weer jojo'en . Misschien kun je gebruik maken van toggle() (althans, ik dacht dat het zo heette).

Jointjeff - 05/05/2014 10:31
HTML interesse		Hey Fangorn, Bedankt voor je reactie. Eerst overal slideup() en de 'active'-class verwijderen had ik ook gedaan. Het resultaat is dat de bovenliggende submenu dan ook dichtklapt, dus dan zie je de onderliggende submenu niet openklappen (klinkt heel vaag, maar hoop dat je begrijpt wat ik bedoel). En juist op dat punt loop ik vast.

Thomas - 05/05/2014 11:27 (laatste wijziging 05/05/2014 11:31)

Moderator

De volgende implementatie van het click event heeft volgens mij het gewenste gedrag. Die while is misschien niet helemaal optimaal, maar als je dropdown klopt qua HTML zou dit geen problemen op moeten leveren.

Dit zou ook moeten werken met meerdere dropdown menu's, maar bij het selecteren van een item in een ander menu wordt dan dus wel alles ingeklapt.

javascript code - Bekijk de code zonder highlighting - Klap code in

                $('.plus').click(function(e){
    e.preventDefault();

    $selectedUL         = $(this).siblings('ul');           // zoek de UL behorend bij de link van het click event
    selectedULactive    = $selectedUL.hasClass('active');   // om te onthouden of de huidige ul al actief was

    // verwijder alle active classes
    $('ul.dropdown ul').removeClass('active');

    // geef het huidige pad (alle ul's tot aan de "root" ul) de active class
    $parentUL = $selectedUL;
    while (!$parentUL.hasClass('dropdown')) {
        $parentUL.addClass('active');
        $parentUL = $parentUL.parent().parent();    // selecteer de volgende "parent ul"
    }

    // klap alle overige ul's in
    $('ul.dropdown ul:not(".active")').slideUp();

    // klap het huidige item uit of in, afhankelijk van of deze al uitgeklapt was
    if (selectedULactive) {
        $selectedUL.removeClass('active'); // je klapt het item in, verwijder dus de active class
        $selectedUL.slideUp();
    } else {
        $selectedUL.slideDown();
    }
});
            
$('.plus').click(function(e){
    e.preventDefault();
 
    $selectedUL         = $(this).siblings('ul');           // zoek de UL behorend bij de link van het click event
    selectedULactive    = $selectedUL.hasClass('active');   // om te onthouden of de huidige ul al actief was
 
    // verwijder alle active classes
    $('ul.dropdown ul').removeClass('active');
 
    // geef het huidige pad (alle ul's tot aan de "root" ul) de active class
    $parentUL = $selectedUL;
    while (!$parentUL.hasClass('dropdown')) {
        $parentUL.addClass('active');
        $parentUL = $parentUL.parent().parent();    // selecteer de volgende "parent ul"
    }
 
    // klap alle overige ul's in
    $('ul.dropdown ul:not(".active")').slideUp();
 
    // klap het huidige item uit of in, afhankelijk van of deze al uitgeklapt was
    if (selectedULactive) {
        $selectedUL.removeClass('active'); // je klapt het item in, verwijder dus de active class
        $selectedUL.slideUp();
    } else {
        $selectedUL.slideDown();
    }
});
 

EDIT: selectedULactive is geen jQuery object (maar een boolean), dus $ weer verwijderd ten einde verwarring te voorkomen.

Bedankt door: Jointjeff

Jointjeff - 05/05/2014 11:42
HTML interesse		FangorN, bij deze bedankt want het werkt Enige wat ik nog heb toegevoegd is een toggleClass('active') op de plus icoontjes. Top, ontzettend bedankt!

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten