det er godt nok ikke css men.. https://jsfiddle.net[...]
--
Gæstebruger, opret dit eget login og få din egen signatur.

#1 tak for det - det ser faktisk godt ud, det eneste "problem" er dog, at hvis man lukker "søgeboksen" igen, så kan man ikke få den frem igen. Er der en mulighed for at nulstille dette? Det skal også bemærkes at jeg er kommet frem til, at det nok ikke kan lade sig gøre i css, da der ikke eksisterer en "parent" selector i css - desværre! :)
--

Sidst redigeret 05-04-2016 07:52

Jeg har muligvis lavet en løsning, men jeg kunne meget godt tænke mig at høre fra nogle som har bedre forstand på JavaScript/jquery end jeg har, om det er rigtigt kodet / sikkert at bruge: https://jsfiddle.net[...] Det er lavet med udgangspunkt i #1's svar, jeg har bare lavet ".on()" om til .focusin / .focusout - jeg ved dog ikke om det gør nogen forskel? Men af hvad jeg lige kan regne ud, så burde dette være brugbar uanset om folk har JavaScript slået til eller ej, da søgemenuen er tilgængelig via css, for dem som ikke har? :)
--

Sidst redigeret 05-04-2016 09:24

Hovsa, jeg har faktisk også én anden metode som lader til at virke (kunne desværre ikke nå at rette tidligere indlæg), hvor der tilføjes en css klasse og derefter fjernes igen - hvilken metode er bedst? link her: https://jsfiddle.net[...] Jeg er lidt i tvivl om, om det er nogen herinde som har lavet eksemplet? Det oprindelige lå på https://jsfiddle.net[...] , men her manglede der bare lige at blive tilføjet en "display:block" i css til .selected klassen.
--

Det ser fint ud. ?Rent konkret er der ét problem. Du har et event bundet til document, selv når du ikke har brug for det. Det kan du erstatte med et .one() kald. Som du selv foreslår, er det generelt god skik at holde CSS styling ude af js, og i stedet bruge js til dynamisk at tilføje/fjerne klasser. Derved bliver det stadig dit stylesheet der er ansvarlig for den faktiske styling af elementerne. Et andet paradigme (omend mere omdiskuteret), er at lave generiske js "helpers" af forskellig art, så du kan trigger dynamisk funktionalitet gennem klassenavne. Som eksempel har jeg lavet et eksempel her: https://jsfiddle.net[...] Jeg kunne ikke lige overskue dit stylesheet osv, så det virker ikke pt, men kig engang på elementerne klassenavne i din element inspector, samt på beskederne der bliver skrevet ud i konsollen. Her har jeg lavet en generel hjælper-funktion, du kan trigger ved at tilføje en "onclick-class" på et element, samt to parametre der specificeres gennem data-target="#search-dropdown" og data-class-name="selected". På den måde kan du genbruge funktionen senere direkte fra dit HTML dokument.
--
http://www.jkg.dk[...]

her det skulle virke bedre https://jsfiddle.net[...]
--
Gæstebruger, opret dit eget login og få din egen signatur.

#6 Fint trick at bruge input focus til at "holde state" :-) Eneste problem er at input felter mister fokus på mousedown, og først får det tilbage på mouseup, så du har en lidt træls blinkeeffekt, hvis du klikker på inputfeltets parent div.
--
http://www.jkg.dk[...]

#5 og #6 mange tak for hjælpen! Umiddelbart tror jeg at løsningen jeg nævnte i #4 er den mest optimale for mit vedkommende på nuværende tidspunkt, også da jeg helst ikke vil have at dropdown-boksen bliver permanent åben hvis man laver en mouseover (#6) :) Men rigtigt lækkert at få nogle alternativer og forklaringer på hvad det er mest optimalt at bruge (#5) Mht. til onClick så er det egentligt lidt komisk at du nævner dem, da jeg allerede har et par onClick funktioner i en anden forbindelse på hjemmesiden, men jeg har simpelthen bare ikke tænkt over den løsning... :) Dog er jeg ikke bekendt med .data delen af JavaScript/jquery, så det kræver vist lige lidt læsning før jeg kaster mig ud i denne løsning
--

Ift. data-attributter er det ret simpelt. Du kunne bruge en hvilken som helst attribute, og læse den med .attr(). Data-attributter er blot en best practice - dog har de den fordel, at browseren ved at hvis en attribut starter med data- , kan den totalt ignorere den, når den "tegner" DOMen. http://html5doctor.com[...]
--
http://www.jkg.dk[...]

#9 aha, se det er jo interessant! :) jeg må lige få læst op på hvordan jeg bruger det, når jeg får tid
--

#10: Det er nemt. <?? data-mitnavn="value"> i html, og $(...).data('mitnavn') til at læse dem.
--
http://www.jkg.dk[...]
--

Sidst redigeret 05-04-2016 13:06