Ben al tijdje bezig een dropdown menu te maken. Nu lukt 1 dropdown wel maar met meerdere loop ik vast.
In jsfiddle heb ik een opstelling gemaakt zodat jullie kunnen zien wat ik gedaan heb.
Wat ik wil is het volgende:
Als je een button aanklikt valt dat menu omlaag, klik je een volgende drop aan dan moet die andere verdwijnen d.m.v. bijvoorbeeld display none.
Het lukt mij niet om dit voor elkaar te krijgen.
Uiteraard kan ik het met een tool doen, maar aangezien ik wil leren programmeren wil ik zoiets zelf kunnen maken.
Als ik een kant en klare code pak weet ik nog niet hoe het nou werkt.
Ik loop nu tegen het probleem dat knop 2 niet terug gaat zoals ik wil en dat als 2 openstaat en ik op knop 1 druk hij deze verwisseld.
Bijvoorbeeld 2 div elementen. We noemen deze simpel div 1 en div 2 en krijgen in de css opacity: 0 mee.
Via jquery wil ik een klik functie aanroepen. Als er geklikt word dan word er gekeken of er een div is met opacity 1.
Is dit zo dan moet die oppast 0 krijgen. De div die opacity 0 heeft moet opacity 1 krijgen.
Dus simpel een wisselwerking. word er op de zelfde div geklikt dan moet deze gewoon opactity 1 of 0 krijgen.
Hier mijn fiddle:
Bijvoorbeeld facebook maakt gebruik van toggle. Dit mag uiteraard ook.
Wat ik niet wil is een generator. Zelf wil ik ween wat er nu gebeurt zodat ik van fouten kan leren.
Hoop dat iemand mij kan helpen.
Gr. Jop
[size=xsmall]Toevoeging op 25/11/2014 15:34:50:[/size]
Waarschijnlijk weet ik al waarom het niet werkt zoals ik wil.
De volgende code werk ook niet zoals het zou moeten
De eerste div doet het goed, alleen de tweede niet. Beide hebben ze dezelfde id en class, dat zou toch eigenlijk ook moeten werken?
Als je wilt dat mensen je code kunnen lezen zodat jij geholpen kunt worden dan moet je minimaal netjes gaan inspringen. Dit is echt les 1 !
Verder ben je aardig op weg. Je maakt al gebruik van $(this), dus je weet hoe je kunt herleiden op welk element er geklikt is. De rest is door jou zelf in te vullen. Laat je niet misleiden door Toggle. In negen van de tien gevallen is de toggle functie niet geschikt. Dit komt omdat de functie iets laat zien als dit verborgen is en het verbergt als het al zichtbaar was. Echter Ben je als programmer hierdoor nooit zeker of je nu iets zichtbaar maakt of juist onzichtbaar.
Toggle doet overigens niets met opacity. toggle, show en hide doen alleen iets met het css display keyword.
show: display:block;
hide: display:none;
In gevallen dat er meerdere div's zijn waarvan er slechts één zichtbaar moet zijn wordt in de regel vaak dit gedaan:
$('.classname').hide(); // alle div's verbergen
$('#id').show(); // een div met id=".." tonen
// of
$(this).show(); // het element (de div) waarop geklikt is tonen
In werkelijkheid worden dus eerst ALLE elementen verborgen waarna er direct weer één zichtbaar wordt.
(Is geen wet maar het werkt meestal prima)
Als je nou op het ene element wilt kunnen klikken (bijvoorbeeld een button) en een ander element moet daarop reageren (bijvoorbeeld een div) dan zul je iets moeten vinden om de elementen met elkaar te te koppelen. Hiervoor kun je bijvoorbeeld het data-... attribuut gebruiken. Dit kan zijn: data-id, data-name, data-class, data-email enzovoorts.
