Меню навигации jQuery - Подменю исчезает при MouseOut - PullRequest
Новая
       12

Меню навигации jQuery - Подменю исчезает при MouseOut

1 голос
/ 01 ноября 2011

Я разрабатываю свое собственное меню навигации jQuery и столкнулся с небольшой проблемой, поскольку подменю исчезают, как только фокус убирается из выбора в главном меню навигации. Я знаю, что должно быть простое решение, но я потратил на это часы и решил, что пришло время для какой-то помощи.

Вот код ниже:

JQuery: 

$(document).ready(function() {

        $('.myMenu li ul').hide(); //hide all sub menus

        $('.myMenu > li').mouseenter(function() {
            $(this).find('ul').stop(true, true).fadeIn("fast");
        });

        $('.myMenu > li').mouseout(function() {
            $(this).find('ul').stop(true, true).fadeOut("fast");
        });
    });

HTML: 

<div id="navigation">
<ul class="myMenu">
    <li><a href="#">Main 1</a></li>
    <li><a href="#">Main 2</a>
        <ul>
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
            <li><a href="#">Sub 3</a></li>
            <li><a href="#">Sub 4</a></li>
            <li><a href="#">Sub 5</a></li>
            <li><a href="#">Sub 6</a></li>
            <li><a href="#">Sub 7</a></li>
            <li><a href="#">Sub 8</a></li>
            <li><a href="#">Sub 9</a></li>
        </ul>
    </li>
    <li><a href="#">Main 3</a>
        <ul>
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
            <li><a href="#">Sub 3</a></li>
        </ul>
    </li>  
    <li><a href="#">Main 4</a></li>
    <li><a href="#">Main 5</a></li>
    <li><a href="#">Main 6</a></li>
    <li><a href="#">Main 7</a></li>
    <li><a href="#">Main 8</a></li>
</ul>
</div>

Любая помощь будет с благодарностью!

Ответы [ 2 ]

2 голосов
/ 02 ноября 2011

Это просто ваш точный приведенный выше код, преобразованный в правильный формат для метода .hover() , который удобно объединяет mouseenter и mouseleave в один метод. 

$('.myMenu > li').hover(
    function() {
        $(this).find('ul').stop(true, true).fadeIn("fast");
}, 
    function() {
        $(this).find('ul').stop(true, true).fadeOut("fast");
});

Кажется, это решает проблему, как вы описали. «Main 2» и «Main 3» остаются открытыми, когда вы находитесь в соответствующих подменю.

http://jsfiddle.net/Zr5ca/1

1 голос
/ 01 ноября 2011

Вот что я сделал, чтобы облегчить вашу проблему. http://jsfiddle.net/raynesax/GWvVj/5/

...