javascript - chowanie elementu po kilkni

pijanyadmin · Post autor: **pijanyadmin** » 28 lipca 2010, 10:41

Może ktoś orientuje się jak uzyskać efekt zamykania menu, po jego otworzeniu, klikając w dowolny obszar strony? Takie menu można zaobserwować na google.com ("więcej"), lub na facebooku ("konto").

Obecnie wszytko wygląda tak:

[html]
<div id="m1">
<p onclick="activetab(1);">Menu 1</p>
<ul>
<li>File</li>
<li>Edit</li>
</ul>
</div>

<div id="m2">
<p onclick="activetab(2);">Menu2</p>
<ul>
<li>Opera</li>
<li>Fx</li>
</ul>
</div>
[/html]

Kod: Zaznacz cały

function activetab(e){
maxtab =2;
tab = document.getElementById('m'+e);
if(tab.getElementsByTagName('ul')[0].style.display == 'block'){
tab.getElementsByTagName('ul')[0].style.display = 'none';
} else {
  for(i=1; i<=maxtab; i++){
    if(i==e){
      tab.setAttribute("class","selected");
      tab.getElementsByTagName('ul')[0].style.display = 'block';
    } else {
       document.getElementById('m'+i).setAttribute("class","");
       document.getElementById('m'+i).getElementsByTagName('ul')[0].style.display = 'none';
       }
 }
}
}

Oraz link do wersji "na żywo".

godlark · Post autor: **godlark** » 28 lipca 2010, 11:47

Nie testowałem, ale możesz elementowi dodać atrybut "onClick" i tam wywołać jakąś funkcję, która chowa menu.

pijanyadmin · Post autor: **pijanyadmin** » 28 lipca 2010, 11:51

godlark - właśnie nie wiem gdzie mam ją dodać. Przypisanie onclick do body, ok nie ma problemu, tylko że jak dam ją gdziekolwiek w tej funkcji, to zaskoczy ona dopiero za 2 razem, a chodzi o to żeby to zaskoczyło od razu, nie mogę dać tego przy ładowaniu strony, bo niby jak mam otworzyć coś, co zostało zamknięte?

godlark · Post autor: **godlark** » 28 lipca 2010, 13:02

Po prostu lenistwo. Nie wiem czym sobie zasłużyłeś (chyba dzisiaj masz szczęście), ale masz:

Kod: Zaznacz cały

<html>
<head>
<script type="text/javascript">
var active_tab=0;

function activetab(e){
	active_tab = e;
}

function set(){
	maxtab=2;
	if(active_tab != 0) {
		e = active_tab;
		tab=document.getElementById('m'+e);
		ul=tab.getElementsByTagName('ul')[0];
		if(ul.style.display == 'block'){
			ul.style.display='none';
			document.getElementById('m'+e).setAttribute("class","");
		}
		else{
			for(i=1;i<=maxtab;i++){
				if(i==e){
					tab.setAttribute("class","selected");
					ul.style.display='block';
				}
				else{
					document.getElementById('m'+i).setAttribute("class","");
					document.getElementById('m'+i).getElementsByTagName('ul')[0].style.display='none';
				}
			}
		}
	}	
	else {
		for(i=1;i<=maxtab;i++){
			document.getElementById('m'+i).setAttribute("class","");
			document.getElementById('m'+i).getElementsByTagName('ul')[0].style.display='none';
		}
	}
        active_tab = 0;
}
</script>
<style>
div{float:left}
div ul{display:none;border:1px solid #ddd}
.selected{color:red}
</style>
</head>
<body>
<div onclick="set()">
<div id="m1">
<p onclick="activetab(1);">Menu1</p>
<ul>
<li>File</li>
<li>Edit</li>
</ul>
</div>

<div id="m2">
<p onclick="activetab(2);">Menu2</p>
<ul>
<li>Opera</li>
<li>Fx</li>
</ul>
</div>
</div>
</body>

pijanyadmin · Post autor: **pijanyadmin** » 28 lipca 2010, 13:44

Nie tyle lenistwo co nie zrozumienie działania takiego elementu. I nie chodziło mi o chowanie menu po jego kliknięciu w którąś pozycję, bo to uzyskałem w powyższym przykładzie, lecz o chowanie menu po kliknięciu w dowolny obszar strony.

Normalnie działałoby to na takiej zasadzie

Kod: Zaznacz cały

window.document.body.setAttribute("onclick","document.getElementById('m'+i).getElementsByTagName('ul')[0].style.display='none';");

Jednak nie wiem właśnie w którym momencie mam to dodać, próbowałem zaraz po otworzeniu + usunięcie tego atrybutu po kliknięciu żeby się nie zapętliło, jednak to nie działa ponieważ onclick zostaje usunięty przed schowaniem.

godlark · Post autor: **godlark** » 28 lipca 2010, 14:49

No więc tak, mamy taki kod:

Kod: Zaznacz cały

<div id="1" onclick="cos1()" >
<div id="2" onclick="cos2()" >
</div>
</div>

Gdy klikniesz na diva od id 2, to pierwsze jest wywoływana funkcja cos2(), później cos1(), dlatego Twój sposób by nie zadziałał. Ponieważ kliknąłbyś na napisa menu1, który rozwinąłby ci menu, jednak później zostałaby wywołany kod z atrybuty onclick elementu body, czyli menu zostałoby zaraz schowane.
W przypadku gdy klikniesz na div o id 1, to tylko wywoływana jest funkcja cos1().

Mój kod napisany w javascripcie działa prawidłowo, wystarczy zamienić <div onclick="set()"> na <body onclick="set()">

javascript - chowanie elementu po kilkni

javascript - chowanie elementu po kilknięciu w dowolny obszar