Проблемы с несколькими setIntervals, работающими одновременно
Мое первое сообщение здесь. Я хочу сделать горизонтальное меню с подменю скатывающимся на наведении мыши. Я знаю, что мог использовать jQuery, но это должно практиковать мои навыки JavaScript.
Я использую следующий код:
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 назначена значением в другой функции, которая не важна для моего вопроса.
HTML похож на это:
<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>
То, что происходит, следующее:
Если я перехожу и (для исключая) меню A, оно хорошо работает. Если я иду теперь по меню B, интервал относился к A, теперь относится B. Существует теперь 2 функции интервала, относился к B. Тот первоначально для A и нового инициирован наведением мыши на B. Если я перешел бы в, ко всем интервалам теперь относятся A.
Я искал в течение многих часов, но и я полностью застреваю.
Заранее спасибо.
2 ответа
Мое первое предложение:
- Попрактикуйтесь в правильном использовании точек с запятой и не полагайтесь на их вставку
- Не передавайте функции в виде строк (для чего требуется неявный
eval) - используйте JavaScript для присоединяйте события ненавязчивым образом
.
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>
AFAIK, (и согласно справке Gecko DOM) window.clearInterval() ничего не возвращает, что может быть причиной, которая все запутывает.