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:
  1. <div id="h_nsk" onMouseOver="change_v_status('h_nsk', true)" onMouseOut="delayOut();">  
  2.     <ul class="ul_gesundheit">  
  3.            <li><a  href="nahrstoffkunde.php?id=2" title="Aminosäuren" >Aminosäuren</a></li>  
  4.            <li><a class="subelement" href="nahrstoffkunde.php?id=3" title="Ballaststoffe" >Ballaststoffe</a>  
  5.   
  6.                <ul class="submenu">  
  7.                   <li><a class="subelement" href="nahrstoffkunde.php?id=4"   title="Mineralstoffe" >Mineralstoffe</a></li>  
  8.                </ul>  
  9.            </li>  
  10.         </ul>  
  11. </div>  
CSS forrás:
  1. .submenu {  
  2.         margin: 0px;  
  3.         margin-left: 10px;  
  4.         padding: 0px;  
  5.         display: none;  
  6.     }  
  7.     .submenu li {  
  8.         list-style-type: none;  
  9.     }  
Javascript ami végzi a megjelenítést és az elrejtést:
  1. var globalID = 0;  
  2.   
  3.   
  4. function delayOut() {  
  5.     globalID = setTimeout('closeall()', 1000);  
  6. }  
  7.   
  8. function closeall() {  
  9.     var z = new Array ('h_ges','h_nsk');  
  10.         /*  alert(temp + ' : ' + x[i].className);*/  
  11.     for (var j=0;j<z.length;j++) {  
  12.         var x = document.getElementById(z[j]);  
  13.         x.style.display = 'none';  
  14.     }  
  15.     return true;  
  16. }  
  17.   
  18. function change_v_status (name, display) {  
  19.     var x = document.getElementById(name);  
  20.     if (x != null) {  
  21.         var z = x.style;  
  22.         closeall();  
  23.         if (display == true) {  
  24.             if (globalID > 0) {  
  25.                 clearTimeout(globalID);  
  26.                 globalID = 0;  
  27.             }  
  28.             z.display = 'block'  
  29.         } else {  
  30.             z.display = 'none';  
  31.         }  
  32.     }  
  33. }  
  34.   
  35. function addEvent(obj, evType, fn) {  
  36.   if (obj.addEventListener) {  
  37.     obj.addEventListener(evType, fn, false);  
  38.     return true;  
  39.   } else if (obj.attachEvent) {  
  40.     var r = obj.attachEvent("on"+evType, fn);  
  41.     return r;  
  42.   } else {  
  43.     return false;  
  44.   }  
  45. }  
  46.   
  47. function removeEvent(obj, evType, fn) {  
  48.   if (obj.removeEventListener) {  
  49.     obj.removeEventListener(evType, fn, false);  
  50.     return true;  
  51.   } else if (obj.detachEvent) {  
  52.     var r = obj.detachEvent("on"+evType, fn);  
  53.     return r;  
  54.   } else {  
  55.     return false;  
  56.   }  
  57. }  
  58.   
  59. function displaySubMenu(evt_) {  
  60.     evt_ || (evt_ = window.event);  
  61.       
  62.     if( evt_.srcElement ) evt = evt_.srcElement;  
  63.     else if( evt_.target ) evt = evt_.target;  
  64.       
  65.     //alert(evt.tagName);  
  66.       
  67.     e = evt.parentNode.getElementsByTagName('UL');  
  68.     for(var i=0; i<e.length; i++) {  
  69.         if (e[i].className == 'submenu') {  
  70.             e[i].style.display = 'block';  
  71.         }  
  72.     }  
  73. }  
  74.   
  75. function hideSubMenu(evt_) {  
  76.     evt_ || (evt_ = window.event);  
  77.       
  78.     if( evt_.srcElement ) evt = evt_.srcElement;  
  79.     else if( evt_.target ) evt = evt_.target;  
  80.   
  81.     evt.style.display = 'none';  
  82. }  
  83.   
  84. function setSubelements() {  
  85.     //body init() eljárásban lefut  
  86.     var elements = document.getElementById('h_nsk').getElementsByTagName('UL');  
  87.     for(var j=0; j<elements.length; j++ )   
  88.         if (elements[j].className == 'submenu') {  
  89. //mindig csak a  megjelenített almenünek van submenu classa  
  90.             //alert(elements[j].parentNode.tagName);  
  91.         addEvent(elements[j].parentNode.getElementsByTagName('A')[0],'mouseover',displaySubMenu);  
  92. //a szülő elem (LI) és annak az első eleme (A), amihez kell  
  93.             addEvent(elements[j], 'mouseout', hideSubMenu)  
  94. //magára a megjelenített elemre is kell egy elrejtés  
  95.         }  
  96. }  
  97.   
  98. function init() {  
  99.   
  100.     setSubelements();  
  101. }  
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:
  1. <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:
  1. <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