trädmeny, hur ändrar man länktexten?

11 svar · 386 visningar · startad av MaRseY 4 okt. 2002

MaRseYMedlem sedan maj 2001178 inlägg

Frågan4 okt. 2002 20:06#1

Hej jag håller på med en trädmeny som mer eller mindre bara visar ett lager om man klickar på länken. Men jag tänkte att det vore fint med att ha ett + framför länken om det finns underlänkar och om man sen klickar på den å underlänkarna är synliga så ska det finnas ett minus framför länken istället för att markera att man kan dölja underlänkarna genom att klicka igen.

nu använder jag en ganska enkel funktion jag själv knåpa ihop.. det är för att visa lagrerna, skulle helst vela få in +/- grejjset i samma härva..

function visa(id)
{
	if(id.style.display == 'block'){
		id.style.display='none';
	}else{
		id.style.display='block';
	}
}

JojoxxMedlem sedan juni 20004 308 inlägg

4 okt. 2002 20:23#2

Detta är inte vad man brukar definiera som "lager" (läs detta inlägg), men så här kan du göra:

<style type="text/css">
.menu { padding-left:10px; }
a { text-decoration:none; color:blue; }
</style>
<script>
function visa(id,li) {
	if(document.getElementById(id).style.display == 'none'){
		document.getElementById(id).style.display='block';
		li.innerHTML="-"+li.innerHTML.substring(1);
	}else{
		document.getElementById(id).style.display='none';
		li.innerHTML="+"+li.innerHTML.substring(1);
	}
}
</script>
<a href="#" onClick="visa('foo',this);">- Foo</a><br>
<div id="foo" class="menu">
	<a href="#">Länk</a><br>
	<a href="#" onClick="visa('faa',this);">- Faa</a><br>
	<div id="faa" class="menu">
		<a href="#">Länk</a><br>
		<a href="#">Länk</a><br>
	</div>
	<a href="#">Länk</a><br>
</div>

MaRseYMedlem sedan maj 2001178 inlägg

5 okt. 2002 09:43#3

tack, precis så jag menade.

fundrusseMedlem sedan jan. 2002286 inlägg

29 dec. 2002 18:39#4

Om man vill att menyn skall startas i stängt läge så att säga.. Så att den inte är helt utvecklad alltså. hur gör man då..

fundrusseMedlem sedan jan. 2002286 inlägg

4 jan. 2003 17:55#5

Hade gärna velat ha ett svar ;)

Peter SMedlem sedan dec. 20025 483 inlägg

4 jan. 2003 19:35#6

Lägg till detta innanför <script>:

window.onload = function(){
     visa("foo", document.getElementById("bar"));
};

Samt detta i den första <a>-taggen:

...id="bar"...

fundrusseMedlem sedan jan. 2002286 inlägg

5 jan. 2003 03:14#7

Men den lösningen var ju inte att rekommendera.
Den stänger ju bara första lagret..

Jag vill att hela menyn (med subbar) skall vara stängd.

JojoxxMedlem sedan juni 20004 308 inlägg

5 jan. 2003 10:48#8

Ta en titt på DOM Meny 2.

fundrusseMedlem sedan jan. 2002286 inlägg

5 jan. 2003 16:49#9

Men den har inte med plus och minus grejset hehe

Jesper TMedlem sedan nov. 20017 144 inlägg

5 jan. 2003 19:16#10

Här har du alla plus och minus som du behöver:
http://david.lidstrom.nu/dev/scripts/js_pelleplus.php

Jojoxx: Din DOM Meny 2 hoppar runt i Netscape när man öppnar de olika menyerna. Visserligen så funkar den men det hoppar runt kan man säga... :)

JojoxxMedlem sedan juni 20004 308 inlägg

5 jan. 2003 19:36#11

fundrusse:

Det är enkelt att lägga dit. Ändra funktionen sw så här;

function sw(mnu,li){
	if(!document.getElementById){ return false; }
	if(document.getElementById(mnu).style.display=='block'){
		if(collapseMode){
			collapseAll(document.getElementById(mnu));
		} else {
			document.getElementById(mnu).style.display='none';
		}
	} else {
		if(document.getElementById(mnu).parentNode.className=="menu" && compressedMode){
			collapseAll(document.getElementById(mnu).parentNode);
			document.getElementById(mnu).parentNode.style.display="block";
		}
		document.getElementById(mnu).style.display="block";
	}
	if(document.getElementById(mnu).style.display == 'none'){
		li.innerHTML="-"+li.innerHTML.substring(1);
	}else{
		li.innerHTML="+"+li.innerHTML.substring(1);
	}
	return false;
}

Ändra lägg till ,this i onClick-eventet samt lägg till "- " i meny-texten så här;

Fixat.

Jesper T:
Det är inte en bug utan en feature :) Prova att sätta compressedMode och collapseMode till false i början av scriptet så får du se.

Peter SMedlem sedan dec. 20025 483 inlägg

6 jan. 2003 09:39#12

Om ändå vill använda "visa"-funktionen kan du göra så här:

<script type="text/javascript">
<!--
window.onload = function(){
	var elms = document.getElementById("meny").getElementsByTagName("*");

	for(var i=0; i<elms.length; i++){
		if(elms[i].href && elms[i].id)
			visa(elms[i+2].id, document.getElementById(elms[i].id));
	}
};
//-->
</script>

HTML-koden (sätt ett id på varje ny kategori [markerat nedan]):

<div id="meny">
<a href="#" [B]id="bar"[/B] onClick="visa('foo',this);">- Foo</a><br>
<div id="foo" class="menu">
	<a href="#">Länk</a><br>
	<a href="#" [B]id="baz"[/B] onClick="visa('faa',this);">- Faa</a><br>
	<div id="faa" class="menu">
		<a href="#">Länk</a><br>
		<a href="#">Länk</a><br>
	</div>
	<a href="#">Länk</a><br>
</div>
</div>