| |
|
|
| | Здравствуйте, уважаемые программисты!
Есть следующий HTML-код для отображения меню и подменю:
стили
<style>
ul.menu {
list-style:none;
}
ul.menu li {
position:relative;
float:left;
border:1px solid;
}
ul.menu ul {
position:absolute;
top:19px;
left:0;
display:none;
list-style:none;
margin:0px;
padding:0px;
}
ul.menu ul li {
position:relative;
clear:left;
width:100px;
}
ul.menu li a {
padding:3px;
}
</style>
|
меню
<body>
<ul id="menu" class="menu">
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2 (drop)</a>
<ul>
<li><a href="#">submenu 1</a></li>
<li><a href="#">submenu 2</a></li>
</ul>
</li>
<li><a href="#">menu 3</a></li>
</ul>
</body>
|
Есть два скрипта, которые должны выполнять одну и ту же задачу (открывать / закрывать подменю). Применить к HTML-документу можно один из этих скриптов. Скрипт №1 работает хорошо, а вот Скрипт №2 работает как-то не удовлетворительно.
скрипт №1
<script type="text/javascript">
function func(f)
{
var ul = document.getElementById('menu').getElementsByTagName('ul')[0];
if (f) {
ul.style.display = 'block';
} else {
ul.style.display = 'none';
}
}
var li = document.getElementById('menu').getElementsByTagName('ul')[0].parentNode;
li.onmouseover = new Function("func(true);");
li.onmouseout = new Function("func();");
</script>
|
скрипт №2
<script type="text/javascript">
var inVal;
function menu_open()
{
var ul = document.getElementById('menu').getElementsByTagName('ul')[0];
ul.style.display = 'block';
clearInterval(inVal);
}
function menu_close()
{
var ul = document.getElementById('menu').getElementsByTagName('ul')[0];
ul.style.display = 'none';
clearInterval(inVal);
}
function func(f)
{
if (f) {
inVal = setInterval('menu_open()', 10);
} else {
inVal = setInterval('menu_close()', 10);
}
}
var li = document.getElementById('menu').getElementsByTagName('ul')[0].parentNode;
li.onmouseover = new Function("func(true);");
li.onmouseout = new Function("func();");
</script>
|
С использованием второго скрипта возникает следующая проблема:
1. Наводим указатель мыши на Menu 2 (drop);
2. Появляется подменю;
3. Когда переводим указатель мыши на открывшееся подменю, то сценарий скрывает подменю, т.е. инициируется событие убирания указателя мыши с <li>menu 2 (drop)</li>.
Почему исчезает подменю?
Фактически, блок подменю находится в блоке <li>menu 2 (drop)</li> и получается, что указатель мыши не уходит с блока <li></li>, а следовательно, событие onmouseout применяемое к <li>menu 2 (drop)</li> инициироваться не должно. Почему оно инициируется во втором сценарии и не инициируется в первом? | |
| |
|
|
| |
|
|
| |
для: SilentChild
(08.06.2011 в 16:36)
| | | я бы тебе посоватовал переходить на jquery, ато слишком много кода приходится писать. | |
| |
|
|
| |
|
|
| |
для: Ильдар
(08.06.2011 в 21:14)
| | | Спасибо, обязательно перейду, но все таки хочется докопаться до сути. Почему же инициируется событие, когда оно не должно инициироваться. Что-то с setInterval()`ом связано, наверняка. Эта проблема не дает мне "спокойно спать" уже очень долгое время. | |
| |
|
|
| |
|
|
| |
для: SilentChild
(22.06.2011 в 15:17)
| | | события надо перехватывать. внутри <li> есть тег <a>. когда наводите на ссылку, то уходите с <li> с срабатывает закрытие | |
| |
|
|
| |
|
|
| |
для: AlexSol
(22.06.2011 в 15:57)
| | | Благодарю Вас, AlexSol! =) | |
| |
|
|
| |
|
|
| |
для: SilentChild
(22.06.2011 в 16:09)
| | | я тоже посоветую вам jquery - сам не так давно перешел. с ним гораздо удобнее писать скрипты | |
| |
|
|
