[JavaScript] Koda en meny med mouseover?

Trädvy Permalänk
Medlem
Plats
65 14
Registrerad
Dec 2001

[JavaScript] Koda en meny med mouseover?

Sitter fast, kan inget om java så vet ej vart jag ska börja

Super enkel java

Jag har en meny och en undermeny

(Exempel)

Meny 1 består av
Galleri - Kontakta

Meny 2 består av
Galleri = 2014, 2015, 2016
Kontakta = hitta, information, skriv till oss

När jag först besöker sidan så är meny 2 dold
när jag klickar på Galleri från meny 1 så ska "meny 2 + galleri" visas
när jag klickar på kontakta ska "meny 2 + kontakta" visas

Denna kod har jag hittat

// JavaScript Document function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; }

I menyn använder jag

<a onclick=toggle_visibility('popup_meny');toggle_visibility('galleri_popup');>galleri</a> <a onclick=toggle_visibility('popup_meny');toggle_visibility('kontakta_popup');>kontakta</a>

popup meny ser ut

<div class="popup" id="popup_meny"> <div id="galleri_popup">Galleri : <a href="#">2014</a> <a href="#">2015</a> <a href="#">2016</a></div> <div id="kontakta_popup">kontakta : <a href="#">hitta</a> <a href="#">information</a> <a href="#">skriv</a></div> </div>

Popup har i css "display: none;" samt galleri_popup och kontakta_popup

Det fungerar sådär.

klickar jag på galleri så dyker galleri popupen
klickar jag på galleri igen så stängs den
klickar jag på kontakta så syns den

"FEL"

klickar jag på galleri så dyker galleri upp
klickar jag nu på kontakta så försvinner galleri
klickar jag på kontakta igen så dyker galleri upp

Vad ska jag kolla efter?

Sent, hoppas ni förstår.

Rubrik förtydligad /screamin-daemon, moderator

Samsung 34'' ultrawide curved
Logitech MX master & Logitech g910
Creative SoundBlaster Katana

Trädvy Permalänk
Entusiast
Testpilot
Plats
Chalmers
Registrerad
Aug 2011

Detta är JavaScript, inte Java.

<a onclick=toggle_visibility('popup_meny');toggle_visibility('galleri_popup');>galleri</a> <a onclick=toggle_visibility('popup_meny');toggle_visibility('kontakta_popup');>kontakta</a>

Glöm inte citationstecken runt attributvärden! Se nedan:

<a onclick="toggle_visibility('popup_meny');toggle_visibility('galleri_popup');">galleri</a> <a onclick="toggle_visibility('popup_meny');toggle_visibility('kontakta_popup');">kontakta</a>

Man ska dock undvika onclick och liknande attribut. Du vill hålla innehåll (HTML) och beteende (JS) separerade. Ett bättre sätt är att göra så:

<a id="gallery">galleri</a> <a id="contact">kontakta</a>

function toggleGallery() { toggle_visibility('popup_meny'); toggle_visibility('galleri_popup'); } function toggleContact() { toggle_visibility('popup_meny'); toggle_visibility('kontakta_popup'); } var galleryLink = document.getElementById("gallery"); var contactLink = document.getElementById("contact"); galleryLink.addEventListener("click", toggleGallery); contactLink.addEventListener("click", toggleContact);

En annan fördel med att skapa funktioner som jag gjorde där är att det gör det enkelt att använda console.log() för att se exakt vilken kod som körs. (Skriver du console.log("hej") någonstans i koden kan du sedan kolla i webbläsarens konsol om det verkligen skrivs ut hej när det borde.)

5930K • Corsair DP 32 GiB • EVGA GTX 980 • 2x Swift PG278Q
Better SweClockersDisplayPort över USB-C

Köp processor för framtiden™, men inte grafikkort.

Trädvy Permalänk
Entusiast
Testpilot
Plats
Chalmers
Registrerad
Aug 2011
Skrivet av downup:

function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; }

Måste även skoningslöst ge mig på den här kodsnutten som innehåller ett par vanliga fallgropar som kan vara fatala.

Använd inte == någonsin, om du inte vet exakt vad du sysslar med. Den konverterar operandernas typ innan den jämför, vilket innebär att till exempel 5 == "5", null == 0 och "" == false alla är true! Det ger dig vansinniga logikfel som kan ta timmar att hitta. Använd ===.

Skriv alltid ut klammerparenteserna kring kodblock, även om blocken bara består av en rad vardera. Annars kommer du även här slita ditt hår över obegripliga logikfel helt i onödan.

Gör alltså så istället:

function toggle_visibility(id) { var e = document.getElementById(id); if (e.style.display === 'block') { e.style.display = 'none'; } else { e.style.display = 'block'; } }

5930K • Corsair DP 32 GiB • EVGA GTX 980 • 2x Swift PG278Q
Better SweClockersDisplayPort över USB-C

Köp processor för framtiden™, men inte grafikkort.

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Aug 2010
Skrivet av Alling:

Använd inte == någonsin, om du inte vet exakt vad du sysslar med. Den konverterar operandernas typ innan den jämför, vilket innebär att till exempel 5 == "5", null == 0 och "" == false alla är true! Det ger dig vansinniga logikfel som kan ta timmar att hitta. Använd ===.

För att fortsätta på samma ämne så finns denna interaktiva tabell där det går att se hur ett antal vanliga jämförelser beter sig med == respektive ===. Som bonus finns det även en tabell som visar hur if(uttryck) beter sig för några olika vanliga uttryck.

Du får gärna citera eller nämna mig (@ToJa92) om du svarar på något jag skrivit.