---
title: "trädmeny, hur ändrar man länktexten?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/55137-trädmeny-hur-ändrar-man-länktexten"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "MaRseY"
published: "2002-10-04T20:06:33.000Z"
updated: "2003-01-06T09:39:07.000Z"
replies: 11
views: 391
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/55137-trädmeny-hur-ändrar-man-länktexten"
---

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

## #1 — MaRseY, 2002-10-04T20:06Z

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';
	}
}
```

Permalänk: https://www.webforum.nu/p/55137

## #2 — Jojoxx, 2002-10-04T20:23Z

Detta är inte vad man brukar definiera som "lager" ([läs detta inlägg](http://www.webforum.nu/showthread.php?s=&postid=455058#post455058)), 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>
```

Permalänk: https://www.webforum.nu/p/810890

## #3 — MaRseY, 2002-10-05T09:43Z

tack, precis så jag menade.

Permalänk: https://www.webforum.nu/p/811127

## #4 — fundrusse, 2002-12-29T18:39Z

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

Permalänk: https://www.webforum.nu/p/895840

## #5 — fundrusse, 2003-01-04T17:55Z

Hade gärna velat ha ett svar ;)

Permalänk: https://www.webforum.nu/p/902431

## #6 — Peter S, 2003-01-04T19:35Z

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"...
```

 :)

Permalänk: https://www.webforum.nu/p/902489

## #7 — fundrusse, 2003-01-05T03:14Z

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.

Permalänk: https://www.webforum.nu/p/902647

## #8 — Jojoxx, 2003-01-05T10:48Z

Ta en titt på [DOM Meny 2](http://www.jojoxx.net/dhtml/).

Permalänk: https://www.webforum.nu/p/902689

## #9 — fundrusse, 2003-01-05T16:49Z

Men den har inte med plus och minus grejset hehe

Permalänk: https://www.webforum.nu/p/902857

## #10 — Jesper T, 2003-01-05T19:16Z

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

Permalänk: https://www.webforum.nu/p/902939

## #11 — Jojoxx, 2003-01-05T19:36Z

**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;

\<a href="#" onClick="return sw('menu_a',this);" class="menuChoice"\>- Menu A\</a\>\<br\>

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.

Permalänk: https://www.webforum.nu/p/902953

## #12 — Peter S, 2003-01-06T09:39Z

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>
```

 :)

Permalänk: https://www.webforum.nu/p/903217

---

Tråden på webben: https://www.webforum.nu/amne/javascript/55137-trädmeny-hur-ändrar-man-länktexten