Gå til innhold

Hjelp med Javascriptmeny

demiurgen

Anbefalte innlegg

demiurgen

demiurgen

Skrevet
Skrevet

Her ligger siden nå med all css, js og html koden i:

http://www.morganwaage.com/test.html

 

Det som skjer er at første gang siden loades må du dobbeltklikke på linkene for å få opp undermenyene. Etter å ha gjort det første gang trenger du bare kllikke en gang på de helt til du refresher siden.

 

Kan noen fortelle meg hvorfor det skjer og evt. hva jeg kan gjøre for å unngå det?

 

Poster for ordens skyld koden her:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Javascript</title>
<script type="text/javascript">
function toggle(obj) {
 var el = document.getElementById(obj);
 if (el.style.display == 'none') {
	 el.style.display = 'block'
 } else {
	 el.style.display = 'none'
 }

}
</script>
<style type="text/css">
#no1, #no2{
 display:none;
}
</style>
</head>

<body>
<ul>
 <li><a href="#" onclick="toggle('no1')">Link 1</a>
	 <ul id="no1">
		 <li><a href="#">Sublink 1</a></li>
		 <li><a href="#">Sublink 2</a></li>
		 <li><a href="#">Sublink 3</a></li>
	 </ul>
 </li>
 <li><a href="#" onclick="toggle('no2')">Link 2</a>
	 <ul id="no2">
		 <li><a href="#">Sublink 1</a></li>
		 <li><a href="#">Sublink 2</a></li>
	 </ul>
 </li>
</ul>
</body>
</html>

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
medlem-68510

medlem-68510

Skrevet
Skrevet (endret)

Det er pga. if-en din. Den skjuler menyen først, selv om den er skjult alt.

 

EDIT: Følgende kode fungerer.

function toggle(obj) {
var el = document.getElementById(obj);
if (el.style.display != 'block') {
	el.style.display = 'block'
} else {
	el.style.display = 'none'
}

}

 

EDIT2: Aw. Jeg ble slått.

Endret av Jckf
Lenke til kommentar
Kaptein Snus

Kaptein Snus

Skrevet
Skrevet (endret)

Hvis ikke det må være med vanlig javascript så kan denne hjelpe:

 

 

EDIT: NVM, du fikk jo svaret :p

 

 

$(function() {

$("ul li a").click(function() {

	// Cache ULen
	var $ul = $(this).next();
	// Hvis ULen er synlig, skjul den, hvis ikke, vis den
	( $ul.is(":visible") ) ? $ul.hide() : $ul.show();

	// Fjerner default action
	return false;
});

});

 

Endret av Lek1
Lenke til kommentar
medlem-68510

medlem-68510

Skrevet
Skrevet
Hvis ikke det må være med vanlig javascript så kan denne hjelpe:

 

 

EDIT: NVM, du fikk jo svaret :p

 

 

$(function() {

$("ul li a").click(function() {

	// Cache ULen
	var $ul = $(this).next();
	// Hvis ULen er synlig, skjul den, hvis ikke, vis den
	( $ul.is(":visible") ) ? $ul.hide() : $ul.show();

	// Fjerner default action
	return false;
});

});

Det der er også "vanlig javascript". Du bruker bare $-objektet fra jQuery. Det er veldig bloat til denne oppgaven.

Lenke til kommentar
Skagen

Skagen

Skrevet
Skrevet

Uttrykket kan forenkles litt:

 

el.style.display = (el.style.display == 'none') ? 'block' : 'none';

Som betyr:

Variabel/referanse = (uttrykk som evalueres til sant/usant) ? Dette dersom sant : Dette dersom usant;

Denne skrivemåten er fin når man skal sette variabler/referanser, og anbefaler å bruke den kun når variabler/referanse skal settes til enten/eller. :)

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...