[jQuery] Dropdown issue

[Ronnyrr]

Hallo allemaal,

Ik zit met een issue waar ik niet uit kan komen met mijn dropdown menu.
Als voorbeeld heb ik een jsfiddle gemaakt om het wat duidelijker te maken.

http://jsfiddle.net/ronnyrr/uLytv/

Het probleem is dus als volgt:
Zodra er op een list item geklikt word opent de drop down zich.
Echter verspringt dan de hele li van de parent met dus ook de ul van de dropdown naar een vaste breedtes.

Ik kan er niet achterkomen waar deze fout vandaan komt of wat ik hieraan kan doen.
Ik heb geen een breedte vast staan, maak alleen een keer gebruik van min-breedtes.
Het al zoveel mogelijk proberen te verwijderen maar of hij houd dus of de breedte klopt helemaal niet meer zoals:


Iemand die mij hier verder kan helpen, ziet waar het fout gaat? Tips?
Bij voorbaat dank!

[RobIII]

Ronnyrr schreef op zaterdag 09 maart 2013 @ 18:14:
Het al zoveel mogelijk proberen te verwijderen

Rare definitie van "zoveel mogelijk" hou jij er op na dan... Als ik dit terugbreng tot de essentie heb ik geen 64 regels HTML, 86 regels CSS en 11 regels JS nodig (totaal: 161) maar 9, 16 en 3 respectievelijk (totaal: 28). Nu kun je je pas goed focussen op het probleem en ik denk dat wel duidelijk is wat er aan de hand is... de ul die zichtbaar wordt na 't click event is breder dan de li waarin 'ie genest is waardoor de parent ul dus zal moeten groeien. Simple as that.

RobIII schreef op vrijdag 29 juli 2011 @ 01:28:
Maar verder: als je een probleem ergens mee hebt dan maak je een (uitgeklede!) testcase met enkel-en-alleen de hoognodige CSS/HTML/whatever om je probleem te illustreren (en reproduceren). Daar help je in eerste instantie jezelf mee (want je creëert een omgeving met weinig variabelen waardoor je makkelijk kunt uitsluiten waaraan iets wel/niet kan liggen) en in de tweede plaats ons: wij hoeven ons niet door allerlei "vreemde" (als in: niet eigen) CSS/HTML/whatever heen te worstelen om je probleem te bekijken.

In jouw versie moeten we (en jij dus ook) mentaal 4.620 bytes verwerken, in mijn versie is dat nog maar 438 bytes (inc. whitespace dan nog). En hoewel een brein natuurlijk niet met bytes werkt zul je natuurlijk ook begrijpen dat een factor 10 minder code allicht makkelijker zoekt naar een probleem. Het gaat niet eens zo zeer om aantallen regels/tekens/whatever, maar om CSS classes, nested HTML elementen enz. enz. die elk verantwoordelijk kunnen zijn voor een "probleem" of "bug". Dus ga je snijden in je code nét zo lang tot je de boosdoener kunt pinpointen. Nu is dat in dit geval niet aan de orde; er is niet echt een boosdoener (en als je die toch wil aanwijzen: de child-ul die de parent-li laat groeien) maar meer een concept waar je schijnbaar nog niet mee bekend was (namelijk dat child-elementen altijd in hun parent moeten passen*) maar op deze manier wordt het wél heel mooi geïllustreerd zonder dat je je nog moet afvragen of 't aan 1 van die 161 regels zou kunnen liggen.

* Absolute positioning e.d. even niet meegerekend.

[ Voor 73% gewijzigd door RobIII op 09-03-2013 22:43 ]