Как исчезнуть в / из меню детей при наведении на родителя - PullRequest
Новая
       29

Как исчезнуть в / из меню детей при наведении на родителя

0 голосов
/ 21 декабря 2011

Я пытаюсь получить базовый fadeIn ребенок ul из #access ul li:hover > ul при наведении и затем fadeOut при наведении.У меня есть этот код, но он не работает: 

jQuery(document).ready(function(){
    jQuery("#access ul li").hover(function() {
            jQuery(this).children("ul").fadeIn(500);
        }, function() {
            jQuery(this).children("ul").fadeOut(500);
    });
});

Следующий код работает, но глючит, потому что я не влияю только на this потомков: 

jQuery(document).ready(function(){
    jQuery("#access ul li").hover(function() {
            jQuery(this).children("ul").fadeIn(500).animate({top: '-=10'}, 500, function() { });
        }, function() {
            jQuery("#access ul li > ul").fadeOut(500).animate({top: '+=10'}, 500, function() { });
    });
});

Кто-нибудь знает, почему не работает верхняя версия?

Вот HTML: 

<nav id="access" role="navigation">
    <div class="menu"><ul>
        <li><a href="#" title="Home">Home</a></li>
        <li><a href="#" title="Sample Page">Sample Page</a>
            <ul class='children'>
                <li><a href="#"; title="About Me">About Me</a></li>
                <li><a href="#" title="Another Page">Another Page</a></li>
            </ul>
        </li>
    </ul></div>
</nav>

Ответы [ 2 ]

0 голосов
/ 21 декабря 2011

Без html это будет просто догадка, но я считаю, что проблема в том, что элемент исчезает при покрытии исходного элемента, к которому прикреплен обработчик события hover, или что-то подобное.

Может быть, что-то вроде этого будет работать: 

$(function() {
     $("#access ul li").mouseenter(function() {
         $('ul', this).fadeIn(500);
     });
     $("#access ul li > ul:visible").mouseleave(function() {
         $(this).fadeOut(500);

     });
});

Если некоторые из элементов #access ul li ul видимы по умолчанию, вы можете попытаться сохранить элемент this из mouseenter в переменной или с данными jQuery и использовать его в функции mouseleave для нацеливания на правильный элемент.

Лучшим вариантом, конечно, было бы структурировать ваш html и css, чтобы он работал нормально.

0 голосов
/ 21 декабря 2011

Звучит странно, у меня все работает нормально:

http://jsfiddle.net/tAUw4/

<div id="access">
    <ul>
        <li>
            Foo
            <ul>
                <li>Foo - 1</li>
                <li>Foo - 2</li>
                <li>Foo - 3</li>
            </ul>
        </li>
        <li>
            Bar
            <ul>
                <li>Bar - 1</li>
                <li>Bar - 2</li>
                <li>Bar - 3</li>
            </ul>
        </li>
        <li>
            Baz
            <ul>
                <li>Baz - 1</li>
                <li>Baz - 2</li>
                <li>Baz - 3</li>
            </ul>
        </li>
    </ul>
</div>

$(function () {
    $('#access li').hover(function () {
        $(this).children('ul').fadeIn();
    }, function () {
        $(this).children('ul').fadeOut();
    });
});

ul ul {
    display: none;
}
...