Поддерживать состояние наведения (jQuery) - PullRequest
Новая
       21

Поддерживать состояние наведения (jQuery)

0 голосов
/ 03 марта 2010

HTML: 

<ul class="dropdown">
    <li><a href="#">Item 1</a></li>
    <li>
        <a href="#">Item 2</a>
        <div class="submenu">something</div>
    </li>
</ul>

JQuery: 

    $j("ul.dropdown li").hover(function () {
        $j(this).addClass("hover");
        $j('div.submenu', this).css('visibility', 'visible');
    }, function () {
        $j(this).removeClass("hover");
        $j('div.submenu', this).css('visibility', 'hidden');
    });

... меню работает нормально, но когда отображается div.submenu и я перемещаю курсор к нему, ссылка, открывшая это подменю, теряет свой класс 'hover', как мне поддерживать состояние наведения на обеих ссылках и подменю, когда они открыты?

Я пробовал это, но это не работает: 

$j("ul.dropdown li").hover(function () {
        $j(this).addClass("hover");
        $j('div.submenu', this).css('visibility', 'visible').hover(function () {
                $j(this).prev('a').addClass('hover');
            }, function () {
                $j(this).prev('a').removeClass('hover');
            });    
    }, function () {
        $j(this).removeClass("hover");
        $j('div.submenu', this).css('visibility', 'hidden');
    });

Ответы [ 3 ]

2 голосов
/ 03 марта 2010

Возможно, вам придется рассмотреть подменю div также как часть элементов jQuery, при этом к нему добавляется эффект наведения. Может быть что-то вроде этого: 

$('ul.dropdown li').each(function() {
    var self = $(this),
        menu = $(this).find('div.submenu'),
        el = menu.add(this);
    el.hover(function() {
            self.addClass("hover");
    menu.css("visibility", "visible");
    }, function() {
            self.removeClass("hover");
        menu.css("visibility", "hidden");
    });
});
1 голос
/ 03 марта 2010

Вы не можете поддерживать состояние наведения на элементе, который не наведен :) Попробуйте поместить div.submenu в ul.dropdown li, если это возможно. Другое решение - перестать полагаться на hover() и использовать другой способ манипулирования своими классами. Не используйте hover() для переключения классов, используйте некоторую функцию, чтобы делать это, и вызывайте ее, когда вам это нужно.

0 голосов
/ 03 марта 2010

По моему опыту, в меню js больше проблем, чем они того стоят. Есть идеальное решение CSS , если вы не хотите каких-либо необычных эффектов затухания или разворачивания.

Но! В любом случае это может быть связано с CSS. Я думаю, что люди обдумывают это. Все, что вы действительно хотите, это чтобы ваша ссылка все еще выглядела зависшей - ваш дисплей в порядке. Хорошо. Вы можете сделать это с помощью CSS и jQuery: 

ul.dropdown li:hover a,
ul.dropdown li.hover a {
/* how your link should look */
}

Теперь, если у вас уже есть этот стиль (.hover важен), ваше подменю должно исчезать и при наведении, так что что-то еще происходит.

...