jdesignMedlem sedan juni 20126 inlägg Hej
Jag skall göra en expanderbarmeny som fälls ut respektive in mha av eventhandlers.
Jag får inte riktigt rätt på det.
Jag tror att felet ligger i var expandera. (jag får allt att fungera om jag ger resp rubrik unika id men det känns lite klumpigt.
Hoppas att jag kan få lite hjälp här!!
//J
<html>
</head>
<body>
<div id="meny">
<ul id="meny">
\<ul class="meny"\>
\<li\>\<h4 class="expandera"\>Nyhetyer\</h4\>
\<ul id="sub1" class="undermeny"\>
\<li\>\<a href="sida12.php"\>Lokalt\</a\>\</li\>
\<li\>\<a href="sida12.php"\>Sverige\</a\>\</li\>
\<li\>\<a href="sida14.php"\>Världen\</a\>\</li\>
\</ul\>
\</li\>
\<li\>\<h4 class="expandera"\>Sport\</h4\>
\<ul id="sub2" class="undermeny"\>
\<li\>\<a href="sida15.php"\>Resultat\</a\>\</li\>
\<li\>\<a href="sida16.php"\>Krönikan\</a\>\</li\>
\<li\>\<a href="sida17.php"\>TT-sport\</a\>\</li\>
\</ul\>
\</li\>
\</ul\>
</div>
\</div\>
</body>
</html>
scriptet
function dropdownmeny() {
var URL = document.menyform.listmeny.options[document.menyform.listmeny.selectedIndex].value;
window.location.href = URL;
}
if(document.childNodes){
document.writeln('<style type="text/css">');
document.writeln('.undermeny { display: none; }');
document.writeln('</style>');
}
function expandera()
{
var expand = next(this);
if(expand.style.display == "none")
{
expand.style.display = "block";
}
else
{
expand.style.display = "none";
}
}
function initExpand()
{
var expandera = document.getElementsByTagName("h4");
for(var i = 0; i < expandera.length ;i++)
{
if(expandera*.className == "expandera")
{
expandera*.onclick = expandera;
}
}
}
function next(elem) {
do {
elem = elem.nextSibling;
} while (elem && elem.nodeType != 1);
return elem;
}
window.onload= initExpand;**
Av vilken anledning vill du använda JavaScript för att göra detta?
jdesignMedlem sedan juni 20126 inlägg det är övningsuppgift som jag sliter med för att försöka lära mig mer om javascript.
jag vet att jag hade kunnat lägga merparten i html-delen men som sagt är det en övnngsuppgift men jag lyckas inte riktigt
//Jenny
Hej,
börja med att omslut din kod med
block så det bli lättare att läsa
en hel fel:
1. Du har element med samma ID
2. du kör document.writeln (om detta lärs ut i skolan så borde du nog fundera på kursen), undvik detta snälla! det är ju bara stilar, lägg in dom i css filer
det verkar antingen fattas kod eller så har du inkluderat mer javascript kod som inte används.
Du gör ett misstag på:
[kod]expandera[i].onclick = expandera;
expandera har du som ett metodnamn (vilket är en variabel) men sen säger du att samma variabel skall vara en kollektion av h4 element, byt namn på ett av dom så skall du se att det fungera bättre.
jdesignMedlem sedan juni 20126 inlägg det fungerar numera utmärkt!!
stort tack för hjälpen.
ett problem som jag inte vet hur jag skall lösa upptäckte jag dock.
Jag måste dubbelklica första gången för att fälla ut menyn, därefter kan jag fälla ut den med enbart ett klick.
Vill jag fälla ut en annan del av menyn måste jag dubbelklicka igen...
//Jenny
jdesign skrev:
det fungerar numera utmärkt!!
stort tack för hjälpen.
ett problem som jag inte vet hur jag skall lösa upptäckte jag dock.
Jag måste dubbelklica första gången för att fälla ut menyn, därefter kan jag fälla ut den med enbart ett klick.
Vill jag fälla ut en annan del av menyn måste jag dubbelklicka igen...
//Jenny
det är för att display är en tom sträng första gången, kolla om den är en tom sträng eller 'none'
jdesignMedlem sedan juni 20126 inlägg hej igen
det fungerade om jag la om display från "none" till ""
vad beror det på?
för att elementet inte har en style.display satt på sig första gången, den är tom.... den läser inte av css innehållet, där av att du måste kolla om den är none eller en tom sträng.
jdesignMedlem sedan juni 20126 inlägg ok, då förstår jag.
Skulle vilja ställa en siste fråga.
du skrev tidigare att document.writeln inte hör hemma här utan i css
hur menar du då, det jag går är en högskolekurs. Därför blir jag lite mer nyfiken om vad du menar eftersom de använde det ganska mycket, framför allt i början av kursen..
document.write och document.writeln är något ni inte bör använda er av i javascript alls det är det webbläsaren väntar på när den börjar läsa en JS fil... ju tidigare vi bli av med den koden ju bättre bli det! det är långsamt då webbläsaren måste vänta på javascripts koden. Och det är en stil, en stil bör vara där man har allt annat med stilar... i sin CSS struktur.
Om du måste använda det så gör det så lite som möjligt (även om det finns bättre sätt att göra samma sak, om du ladda in externa källor så kommer den vänta tills dessa källor är nerladdade innan den ladda resten av sidan).
Helt enkelt, sidan kommer kunna kännas som långsammare in laddning, kan se om jag hittar en bra video om vad document.write gör och varför det är dåligt. Läs vad Crockford skriver om document.write på: http://javascript.crockford.com/script.html
jag skrev om din kod till något jag hade använt kanske (även om jag hade kört jQuery för det mesta ändå): http://jsbin.com/iforih/edit#javascript,html,live
