Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

[JavaScript] Koda en meny med mouseover?

1
Skriv svar
Permalänk
Medlem ★
●

[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
Redigera
Citera flera Citera
Permalänk
99:e percentilen ★
●

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.)

Senast redigerat
Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
99:e percentilen ★
●
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';
    }
Gå till inlägget

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';
    }
}
Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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 ===.

Gå till inlägget

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.

Visa signatur

Citera eller nämn gärna mig (@ToJa92) om du svarar på något jag skrivit.
Uppskattar du eller blir hjälpt av ett inlägg jag skrivit är jag tacksam om du gillar det.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara