एकाधिक सेटइंटरवाल के साथ समस्याएं एक साथ चल रही

Question

मेरी पहली पोस्ट यहां। मैं माउसमेन पर सबमेनू की स्लाइडिंग के साथ एक क्षैतिज मेनू बनाना चाहता हूं। मुझे पता है कि मैं jQuery का उपयोग कर सकता हूं लेकिन यह मेरे जावास्क्रिप्ट कौशल का अभ्यास करना है।

var up = new Array() 
var down = new Array() 
var submenustart 

function titleover(headmenu, inter) 
{ 
submenu = headmenu.lastChild 

up[inter] = window.clearInterval(up[inter]) 
down[inter] = window.setInterval("slidedown(submenu)",1) 
} 

function slidedown(submenu) 
{ 
if(submenu.offsetTop < submenustart) 
{ 
    submenu.style.top = submenu.offsetTop + 1 + "px" 
} 
} 

function titleout(headmenu, inter) 
{ 
submenu = headmenu.lastChild 

down[inter] = window.clearInterval(down[inter]) 
up[inter] = window.setInterval("slideup(submenu)", 1) 

} 

function slideup(submenu) 
{ 
if(submenu.offsetTop > submenustart - submenu.clientHeight + 1) 
{ 
    submenu.style.top = submenu.offsetTop - 1 + "px" 
} 
} 

चर submenustart एक और समारोह जो मेरे सवाल के लिए प्रासंगिक नहीं है में एक मूल्य नियुक्त हो जाता है:

मैं निम्नलिखित कोड का उपयोग करें।
एचटीएमएल इस तरह दिखता है:
अगर मैं पर और बाहर मेनू एक (पूर्व के लिए) जाना यह ठीक काम करता है:

<table class="hoofding" id="hoofding"> 
<tr> 
    <td onmouseover="titleover(this, 0)" onmouseout="titleout(this, 0)"><a href="#" class="hoofdinglink" id="hoofd1">AAAA</a> 

    <table class="menu"> 
    <tr><td><a href="...">1111</a></td></tr> 
    <tr><td><a href="...">2222</a></td></tr> 
    <tr><td><a href="...">3333</a></td></tr> 
    </table></td> 

    <td onmouseover="titleover(this, 1)" onmouseout="titleout(this, 1)"><a href="#" class="hoofdinglink">BBBB</a> 

    <table class="menu"> 
    <tr><td><a href="...">1111</a></td></tr> 
    <tr><td><a href="...">2222</a></td></tr> 
    <tr><td><a href="...">3333</a></td></tr> 
    <tr><td><a href="...">4444</a></td></tr> 
    <tr><td><a href="...">5555</a></td></tr> 
    </table></td> 
     ... 
</tr> 
</table> 

क्या होता है निम्नलिखित है। यदि मैं अब मेनू बी पर जाता हूं तो ए पर लागू अंतराल अब बी पर लागू होता है। अब बी पर लागू 2 अंतराल फ़ंक्शंस हैं। मूल रूप से ए के लिए मूल रूप से बी और पर माउसओवर द्वारा ट्रिगर किया गया नया अगर मैं जाऊंगा ए के लिए सभी अंतराल अब ए

पर लागू होते हैं, मैं घंटों की खोज कर रहा हूं लेकिन मैं पूरी तरह से अटक गया हूं।

अग्रिम धन्यवाद।

Answer 1

मेरा पहला सुझाव है अभ्यास अर्धविराम को सही ढंग से उपयोग कर रहा अर्धविराम प्रविष्टि पर निर्भर

तार के रूप में कार्य पारित मत करो

1. को (जिसके लिए आवश्यक एक अंतर्निहित eval)
2. use JavaScript to attach events in a non-obtrusive manner

।

var up = [], 
    down = [], 
    submenustart; 

function titleover(headmenu, inter) { 
    up[inter] = window.clearInterval(up[inter]); 
    down[inter] = window.setInterval(function() { slidedown(headmenu.lastChild); }, 1); 
} 

function slidedown(submenu) { 
    if (submenu.offsetTop < submenustart ) { 
     submenu.style.top = submenu.offsetTop + 1 + "px"; 
    } 
} 

function titleout(headmenu, inter) { 
    down[inter] = window.clearInterval(down[inter]); 
    up[inter] = window.setInterval(function() { slideup(headmenu.lastChild); }, 1); 
} 

function slideup(submenu) { 
    if (submenu.offsetTop > submenustart - submenu.clientHeight + 1) { 
     submenu.style.top = submenu.offsetTop - 1 + "px"; 
    } 
} 

मेरा दूसरा सुझाव मेन्यू के लिए टेबल का उपयोग नहीं करना है, क्योंकि वे टैब्यूलर डेटा नहीं हैं। इसके बजाय, एक अपरिवर्तित सूची का उपयोग करें।

<ul class="hoofding" id="hoofding"> 
    <li onmouseover="titleover(this, 0)" onmouseout="titleout(this, 0)"> 
     <a href="#" class="hoofdinglink" id="hoofd1">AAAA</a> 
     <ul class="menu"> 
      <li><a href="...">1111</a></li> 
      <li><a href="...">2222</a></li> 
      <li><a href="...">3333</a></li> 
     </ul> 
    </li> 
    <li onmouseover="titleover(this, 1)" onmouseout="titleout(this, 1)"> 
     <a href="#" class="hoofdinglink">BBBB</a> 
     <ul class="menu"> 
      <li><a href="...">1111</a></li> 
      <li><a href="...">2222</a></li> 
      <li><a href="...">3333</a></li> 
     </ul> 
    </li> 
</ul> 

Answer 2

AFAIK, (और गेको डोम संदर्भ के अनुसार) window.clearInterval() कुछ भी वापस नहीं करता है, जो शायद कारणों को गड़बड़ कर देता है।