Состояние при наведении - PullRequest
Новая
       8

Состояние при наведении

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').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');
    });

... меню работает нормально, но навигационная ссылка (открывающая выпадающий список) должна оставаться выделенной в раскрывающемся меню. Как сохранить состояние наведения на ссылку и подменю, когда они открыты?

Спасибо!

Ответы [ 2 ]

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

Попробуйте что-то вроде этого: 

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

Если вам явно не нужно visibility и display будет работать, вы можете сделать это: 

$j("ul.dropdown li").hover(function () {
    $j(this).children('a').andSelf().addClass("hover");
    $j('div.submenu', this).show();
}, function () {
    $j(this).children('a').andSelf().removeClass("hover");
    $j('div.submenu', this).hide();
});
0 голосов
/ 03 марта 2010

Если вы используете visibility: hidden вместо display: none, страница зарезервирует визуальное пространство, которое должен занимать элемент, что, как правило, не то, что требуется для вложенного меню

Если visibility - это то, что вы хотите, игнорируйте меня. Иначе, вот альтернатива, которая использует display (которая выделяет каждый выбранный элемент в иерархии, который, казалось, был тем, о чем спрашивал ваш вопрос):

Style 

li.hover { background: #eee; }
li.hover ul { background: #fff; }
ul ul { display: none; }

HTML 

<ul>
    <li><a href="#">Item 1</a></li>
    <li>
        Item 2
        <ul>
            <li><a href="#">Item 2.a</a></li>
            <li>
                Item 2.b
                <ul>
                    <li><a href="#">Item 2.b.1</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Item 3</a></li>
</ul>

JQuery 

$(function() {
    $("ul li").hover(
        function () {
            $(this).addClass("hover").children("ul").show();
        },
        function () {
            $(this).removeClass("hover").children("ul").hide();
        }
    );
});
...