Søg
Avatar billede mr_bula Nybegynder
25. september 2006 - 21:06 Der er 23 kommentarer og
1 løsning

Enkel træmenu

Hej alle eksperter,

Jeg er ved at lave en søgemenu, og vil gerne have at man pr default søger overordnet, men man skal have mulighed for at lave en advanceret søgning.

Hvis I går ind på http://nokia.dk/phones/models/index.php?status=2 - vil gerne have det sådan at mine udvidet søgenings felter pr default er gemt væk som "flere funktioner" er ved nokia.

Har rodet lidt med det, men er gået død efter et utal af forsøg, så håber I kan hjælpe.
Avatar billede psykochicken Nybegynder
25. september 2006 - 23:16 #1
Du kunne prøve noget i stil med:
<script type="text/javascript">
function toggleElement(num){
var elm = document.getElementById('element' + num).style;
  if(elm.display=='none'){
    elm.display='block';
  }else{
    elm.display='none';
  }
}
</script>

<div onclick="toggleElement(1);">Almindelige funktioner</div>
  <div id="element1" style="display:block">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
  </div>
<div onclick="toggleElement(2);">Almindelige funktioner</div>
  <div id="element2" style="display:none">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
  </div>

/psc
Avatar billede mr_bula Nybegynder
26. september 2006 - 10:50 #2
Mit problem ligger i, at jeg ikke kan få "minmer/maksimer" felterne frem, altså plusset og minusset i dette tilfælde. Og der er ingen "usynlige" steder jeg kan trykke for at den skal vise/ikke vise indholdet.

Har prøvet med deres JS:
function toggleElement (id) {
    var element = document.getElementById("element" + id);
    var node    = document.getElementById("node" + id);
    if(element.style.display == "none") {
        element.style.display = "block";
        node.style.background = "url(grafik/widget_minus.jpg) no-repeat 0px 3px";
    } else {
        element.style.display = "none";
        node.style.background = "url(grafik/plus.jpg) no-repeat 0px 3px";
    }
}

Er der ingen der har en simpel løsning til dette med at skjule/vise noget indhold på denne måde?
Avatar billede psykochicken Nybegynder
26. september 2006 - 11:53 #3
Du skal nok finde et andet variabelnavn end "node".

Og så bliver det vel ikke meget mere simpelt end enten din egen løsning eller:

<script type="text/javascript">
function tog(num, id){
var elm = document.getElementById('element' + num);
  if(elm.style.display=='none'){
    elm.style.display='block';
    id.firstChild.src="grafik/widget_minus.jpg";
  }else{
    elm.style.display='none';
    id.firstChild.src="grafik/plus.jpg";
  }
}
</script>

<div onclick="tog(1,this);"><img src="grafik/widget_minus.jpg">Almindelige funktioner</div>
  <div id="element1" style="display:block">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
  </div>
<div onclick="tog(2,this);"><img src="grafik/plus.jpg">Almindelige funktioner</div>
  <div id="element2" style="display:none">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
  </div>

/psc
Avatar billede mclemens Nybegynder
26. september 2006 - 12:29 #4
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

function tog(e){
  s=e.childNodes[2].style;
  s.display=s.display=='block'?'none':'block';
  e.firstChild.src=s.display=='block'?'minus.gif':'plus.gif';
}
</script>

</head><body>

<div onclick="tog(this);"><img src="minus.gif">Almindelige funktioner<div id="element1" style="display:block">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div></div>


<div onclick="tog(this);"><img src="plus.gif">Almindelige funktioner<div id="element2" style="display:none">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div></div>


</body></html>
Avatar billede psykochicken Nybegynder
26. september 2006 - 12:32 #5
LOL...ok så lidt simplere da ;o)
Avatar billede mr_bula Nybegynder
26. september 2006 - 12:38 #6
De spiller begge to max.

Smid et svar

P.S
mclemens: Hvis du har tid og overskud vil en simpel forklaring af din funktion være værdsat ;)
Avatar billede mclemens Nybegynder
26. september 2006 - 12:38 #7
En lille smule :)
Synes ikke det er "simplere"
men lidt mere kompakt måske ...

id="element1" og id="element2 er overflødige
medmindre styles lægges over i stylesheet ...

s=e.childNodes[2].style; <- 2 skal måske variere lidt ...
Avatar billede mclemens Nybegynder
26. september 2006 - 12:44 #8
<div onclick="tog(this);"> <- sender en reference med til funktionen.

function tog(e){ <- referencen ligges i variablen e

  s=e.childNodes[2].style; <- s variablen refererer til element nr 3 i hoved div'en - den div der skal vises/skjules (første element childNodes[0] er billedet ... kan også kaldes via firstChild som nede ved src skiftet... childNodes[1] er tekst strengen...

  s.display=s.display=='block'?'none':'block'; <- afhængig af om det tredje element er vist eller skjult ... vises eller skjules den

  e.firstChild.src=s.display=='block'?'minus.gif':'plus.gif'; <- src indstilles til minus eller plus afhængig af om element nr 3 nu er vist eller skjult ...

}
Avatar billede roenving Novice
26. september 2006 - 12:44 #9
-- ja, bare det, at det vil føles naturligt at sætte tingene på flere linjer, kan lave nummereringen helt om, da de fleste browsere så vil registrere tekstnodes for hvert linjeskift !-)

-- måske man skulle lave en getFirstChildOfType-funktion ?-)
Avatar billede roenving Novice
26. september 2006 - 12:46 #10
-- i øvrigt kan jeg anbefale at teste negativt, dvs.:

s.display=s.display!='block'?'block':'none';
Avatar billede psykochicken Nybegynder
26. september 2006 - 12:50 #11
bula >> smid du bare pointene efter mclemens ;o)

/psc
Avatar billede mclemens Nybegynder
26. september 2006 - 12:55 #12
26/09-2006 12:46:10 <- Fanger jeg ikke helt ...
Jeg vil anbefale denne:
  s.display=s.display=='block'||s.display==''?'none':'block';
(af hensyn til elementet hvis der ikke er block som style på den)
... Ved dog ikke om der er en anden årsag til negativ test ...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

function tog(e){
  s=e.childNodes[2].style;
  s.display=s.display=='block'||s.display==''?'none':'block';
  e.firstChild.src=s.display=='block'?'minus.gif':'plus.gif';
}
</script>

</head><body>

<div onclick="tog(this);"><img src="minus.gif">Almindelige funktioner<div>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div></div>

<div onclick="tog(this);"><img src="plus.gif">Almindelige funktioner<div>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div></div>

</body></html>
Avatar billede mclemens Nybegynder
26. september 2006 - 12:55 #13
26/09-2006 12:44:36 <- God ide
Avatar billede roenving Novice
26. september 2006 - 13:08 #14
>>mclemens

-- det er lige præcis grunden til den negative test: at man ofte skjuler/viser ting nitielt via en klasse i stylesheetet, og så vil elementet ikke selv have en style-property, der kan aflæses !-)

-- og den negative test vil selvfølgelig være marginalt hurtigere end en dobbelt test, hvilket er grunden til at jeg foretrækker den !o]
Avatar billede mclemens Nybegynder
26. september 2006 - 13:18 #15
^ - > Jeps lige det jeg ikke forstår, jeg kan ikke se at
s.display=s.display!='block'?'block':'none'; er bedre
end: s.display=s.display=='block'?'none':'block';
(klik på den øverste herunder)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

function tog(e){
  s=e.childNodes[2].style;
  s.display=s.display!='block'?'block':'none';
  e.firstChild.src=s.display=='block'?'minus.gif':'plus.gif';
}
</script>

</head><body>

<div onclick="tog(this);"><img src="minus.gif">Almindelige funktioner<div>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div></div>

<div onclick="tog(this);"><img src="plus.gif">Almindelige funktioner<div style="display:none;">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div></div>

</body></html>



[ -- og den negative test vil selvfølgelig være marginalt hurtigere end
en dobbelt test, hvilket er grunden til at jeg foretrækker den !o] ]
Ja, men den vil bare ikke virke - hvorimod den i 12:55:27 vil ...
Avatar billede mclemens Nybegynder
26. september 2006 - 13:25 #16
Hov,  elementerne jeg lavede virkede ikke - den
skjuler jo menuen når man klikker i menuen :/
Avatar billede mclemens Nybegynder
26. september 2006 - 13:27 #17
M.h.t. 26/09-2006 13:08:39,
så skulle s.display=s.display=='block'||s.display==''?'none':'block';
bare vendes en tand ... s.display=s.display!='none'?'none':'block';

... men selve script forslaget skal jo rettes ...
26/09-2006 11:53:26 er den eneste der virker p.t.
Avatar billede mclemens Nybegynder
26. september 2006 - 13:29 #18
Sådan:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

function tog(e){
  s=e.childNodes[1].style;
  s.display=s.display!='none'?'none':'block';
  e.firstChild.src=s.display=='block'?'minus.gif':'plus.gif';
}
</script>

</head><body>

<div><span  onclick="tog(this.parentNode);"><img src="minus.gif">Almindelige funktioner</span><div>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div></div>

<div><span  onclick="tog(this.parentNode);"><img src="plus.gif">Almindelige funktioner</span><div style="display:none;">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div></div>

</body></html>
Avatar billede roenving Novice
26. september 2006 - 13:29 #19
Måske som denne: http://www.eksperten.dk/spm/625318 !-)
Avatar billede mclemens Nybegynder
26. september 2006 - 13:31 #20
Kast lige et svar Rønving ...
Avatar billede mclemens Nybegynder
26. september 2006 - 13:35 #21
Umiddelbart er psykochicken's
ligeså simpel efterhånden :D


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

function tog(e){
  e2=0;e3=e.firstChild;
  while(e3.getAttribute("rel")!="sh")e3=e.childNodes[++e2];s=e3.style;
  s.display=s.display!='none'?'none':'block';
  e.firstChild.firstChild.src=s.display=='block'?'minus.gif':'plus.gif';
}
</script>

</head><body>

<div><span  onclick="tog(this.parentNode);"><img src="minus.gif">Almindelige funktioner</span><div rel="sh">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div></div>

<div><span  onclick="tog(this.parentNode);"><img src="plus.gif">Almindelige funktioner</span><div style="display:none;" rel="sh">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div></div>

</body></html>
Avatar billede mclemens Nybegynder
26. september 2006 - 13:41 #22
Foretrækker psykochikens kald og markup :)



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
function tog(num, id){
  s= document.getElementById('element' + num).style;
  s.display=s.display!='none'?'none':'block';
  id.firstChild.src=s.display!='none'?'minus.gif':'plus.gif';
}
</script>
</head><body>

<div onclick="tog(1,this);"><img src="minus.gif">Almindelige funktioner</div>
  <div id="element1" style="display:block">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
  </div>
<div onclick="tog(2,this);"><img src="plus.gif">Almindelige funktioner</div>
  <div id="element2" style="display:none">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
  </div>

</head><body>
Avatar billede mclemens Nybegynder
26. september 2006 - 13:58 #23
Rønving, rimelig smart med den menu :)
onclick="event.cancelBubble=true"
^ Speciel rar at kende, mange tak :)
Avatar billede mclemens Nybegynder
14. november 2006 - 13:53 #24
Tak for point :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 16:04 Canon printer vil ikke udskrive farver Af mort1 i Printere
I går 14:50 Hvilket fabrikat af Mesh systemer virker? Af fkj i Wifi
15/0513:45 AJAX kode -javascript Af Asky i Programmeringsværktøjer
15/0511:50 Vælg indstilling - blå skærm med med flere muligheder for fejlretning Af Uvanga i Windows
14/0523:24 Google sheets beregning udfra dato Af rickiegrayholm i Office & Kontorpakker
White papers
Flere white papers »