Мой собственный аккордеон jQuery
Вопрос
Привет, ребята, я создал следующую структуру меню:
<div id="menu">
<ul>
<li><a href="#">Main Item1</a></li>
<li><a href="#">Main Item2</a></li>
<li><a href="#">Main Item3</a>
<ul>
<li><a href="#">SubItem for MainItem3</a></li>
<li><a href="#">2ndSub for MainItem3</a></li>
</ul>
</li>
<li><a href="#">Main Item4</a>
<ul>
<li><a href="#">SubItem for MainItem4</a></li>
<li><a href="#">2ndSub for MainItem4</a></li>
</ul>
</li>
</ul>
</div>
Вот моя структура меню.Теперь я хочу использовать jQuery Latest для создания эффекта SlideUp/SlideDown.
Я делаю так:
$(document).ready(function(){
$('#menu ul li:has(ul)').mouseenter(function(){
$('#menu ul li ul').slideDown('slow');
}).mouseleave(function(){
$('#menu ul li ul').slideUp('slow');
});
});
Сначала я попробовал наведение курсора мыши и наведение курсора мыши, но когда я использовал эту функцию, наведение курсора мыши сработало, и когда я хотел перейти к подменю, меню сдвинулось вверх, но произошло событие mouseout.Теперь это сработало, но когда я навожу курсор, например.в Основном элементе 3 подмены также из Основного элемента 4 открываются и закрываются при наведении курсора мыши?!?!Как сказать только пункты меню, например.Главный предмет 3 или Основной предмет 4???
Надеюсь, вы понимаете, что я имею в виду?
Спасибо
Решение
$(function(){
$('#menu ul li:has(ul)').hover(function(){
$(this).find('ul').slideDown('slow');
}, function(){
$(this).find('ul').slideUp('slow');
});
});
Не связан с StackOverflow