ugrás a tartalomhoz

Display = block probléma Javascriptben

bsanyi · 2006. Aug. 28. (H), 12.16
Üdv Mindenkinek,

van egy menü, aminek bizonyos elmei rendeleréskor rejtve vannak, majd ezeket javascripttel szeretném megjeleníteni:

HMTL forrás:

<div id="h_nsk" onMouseOver="change_v_status('h_nsk', true)" onMouseOut="delayOut();">
	<ul class="ul_gesundheit">
           <li><a  href="nahrstoffkunde.php?id=2" title="Aminosäuren" >Aminosäuren</a></li>
           <li><a class="subelement" href="nahrstoffkunde.php?id=3" title="Ballaststoffe" >Ballaststoffe</a>

               <ul class="submenu">
                  <li><a class="subelement" href="nahrstoffkunde.php?id=4"   title="Mineralstoffe" >Mineralstoffe</a></li>
               </ul>
           </li>
        </ul>
</div>
CSS forrás:

.submenu {
		margin: 0px;
		margin-left: 10px;
		padding: 0px;
		display: none;
 	}
 	.submenu li {
 		list-style-type: none;
 	}
Javascript ami végzi a megjelenítést és az elrejtést:


var globalID = 0;


function delayOut() {
	globalID = setTimeout('closeall()', 1000);
}

function closeall() {
	var z = new Array ('h_ges','h_nsk');
		/*	alert(temp + ' : ' + x[i].className);*/
	for (var j=0;j<z.length;j++) {
		var x = document.getElementById(z[j]);
		x.style.display = 'none';
	}
	return true;
}

function change_v_status (name, display) {
	var x = document.getElementById(name);
	if (x != null) {
		var z = x.style;
		closeall();
		if (display == true) {
			if (globalID > 0) {
				clearTimeout(globalID);
				globalID = 0;
			}
			z.display = 'block'
		} else {
			z.display = 'none';
		}
	}
}

function addEvent(obj, evType, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(evType, fn, false);
    return true;
  } else if (obj.attachEvent) {
    var r = obj.attachEvent("on"+evType, fn);
    return r;
  } else {
    return false;
  }
}

function removeEvent(obj, evType, fn) {
  if (obj.removeEventListener) {
    obj.removeEventListener(evType, fn, false);
    return true;
  } else if (obj.detachEvent) {
    var r = obj.detachEvent("on"+evType, fn);
    return r;
  } else {
    return false;
  }
}

function displaySubMenu(evt_) {
	evt_ || (evt_ = window.event);
	
	if( evt_.srcElement ) evt = evt_.srcElement;
	else if( evt_.target ) evt = evt_.target;
	
	//alert(evt.tagName);
	
	e = evt.parentNode.getElementsByTagName('UL');
	for(var i=0; i<e.length; i++) {
		if (e[i].className == 'submenu') {
			e[i].style.display = 'block';
		}
	}
}

function hideSubMenu(evt_) {
	evt_ || (evt_ = window.event);
	
	if( evt_.srcElement ) evt = evt_.srcElement;
	else if( evt_.target ) evt = evt_.target;

	evt.style.display = 'none';
}

function setSubelements() {
	//body init() eljárásban lefut
	var elements = document.getElementById('h_nsk').getElementsByTagName('UL');
	for(var j=0; j<elements.length; j++ ) 
		if (elements[j].className == 'submenu') {
//mindig csak a  megjelenített almenünek van submenu classa
			//alert(elements[j].parentNode.tagName);
	 	addEvent(elements[j].parentNode.getElementsByTagName('A')[0],'mouseover',displaySubMenu);
//a szülő elem (LI) és annak az első eleme (A), amihez kell
		 	addEvent(elements[j], 'mouseout', hideSubMenu)
//magára a megjelenített elemre is kell egy elrejtés
		}
}

function init() {

	setSubelements();
}
Az megjelenítés és az elrejtés működik első alkalommal, utána már sajnos nem jeleníti meg az elemet, pedig FireBug szerint lefut az e[i].style.display = 'block' utasítás a megfelelő elemen, csak a böngészőben nem látszik.

Nem látom a hibát, pedig csináltam már egy 10 perces szünetet is, hátha... :)

Remélem vki tud segíteni, mert én már nem látom a fától az erdőt

Köszönöm
Üdvözlettel
bsanyi

UI: a change_v_status és displayOut eljárásoknak elvileg nincs befolyása az áltam problémásan működő részletre (szerintem), bár azok is megjelenítést szabályozzák, de egyel feljebb levő szintem, ahol probléma nélkül futnak
‹ Min-width és max-width IE7 alatt Ablakon belüli görgethető keret ›
 ■
1

Sejtés

w3net · 2006. Aug. 28. (H), 13.02
A JS kód tanulmányozása nélkül azt ajánlom, hogy próbáld ki igy:
<ul class="submenu" style="display: none">
Talán segit.

Idézem Thomas Fuchs barátunkat:

Don't use display:none in external CSS
Browser can't determine the original (built-in)
display value of an element (like "block" for DIVs,
and "inline" for SPANs)

Use the style attribute instead:
<div style="display:none">...</div>
2

Probléma forrása

bsanyi · 2006. Aug. 28. (H), 14.12
Üdv Mindenkinek,

egy kicsit kutatkodtam a console.log segítségével az eseményvezérlésben és arra jöttem rá, hogy hiába az UL elemnek adom meg az onmouseout eseményt, akkor is már a legalsó li->a elem esetében is végrehajtódik az onmouseout esemény.

A számomra furcsa viselkedés, akkor vált gyanússá, amikor két elemet is tartalmazott az class=submenu UL elem, mert ilyenkor már az első LI elemben szereplő A elem egérrel való elhagyásánál is lefutott a hideSubMenu eljárás.
Ennek az eljárásnak, pedig csak akkor kellett volna lefutni, ha az elem UL class=submenu.

Fel tudna vki világosítani, hogy ez miért történik? Feltételezem az esemény át lesz adva az összes UL class=submenu elem alatti elemnek, de miért?

Köszi
Üdv
bSanyi