Polskie Forum Użytkowników Debiana

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

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

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?

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>

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.

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()">

Polskie Forum Użytkowników Debiana

javascript - chowanie elementu po kilkni

javascript - chowanie elementu po kilknięciu w dowolny obszar