jQuery .hover () и загрузка страницы

Question

jQuery .hover () и загрузка страницы

0

У меня есть следующие div:

<div id="foo">
...
    <div id="bar" class="container hidden">
    ...
    </div>
</div>

Я использую Twitter Bootstrap 3, и я добавил скрытый класс, чтобы автоматически скрыть второй div по умолчанию.

У меня есть следующий код:

$(document).ready(function() {
    $("#foo").hover(
        function() {
            $("#bar", this).toggleClass("hidden");
        }, function() {
            $("#bar", this).toggleClass("hidden");
    });
});

Кажется, что он работает корректно, но если мышь, если он уже навевает #foo div во время загрузки страницы, он по умолчанию применяет эффект зависания. После этого, если я перемещаю мышь вне div #foo, он снова применяет toggleClass и отображает внутренний #bar div.

Как предотвратить такое поведение при загрузке страницы?

jrean 16 апр. 2014, в 17:02

Источник

0

Это в пределах $(document).ready() ?
Scimonster 16 апр. 2014, в 14:46
0

да, ты можешь попробовать это?
Aldren Terante 16 апр. 2014, в 14:47
0

Контекстный селектор здесь бесполезен, идентификатор должен быть уникальным.
Karl-André Gagnon 16 апр. 2014, в 14:52

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

jquery-hover

3 ответа

4

Это правильный способ сделать это:

$("#foo").hover(
    function() {
        $("#bar", this).addClass("hidden");
    }, function() {
        $("#bar", this).removeClass("hidden");
});

Peter 16 апр. 2014, в 13:40

0

Это правильный ответ, который вы ищете :) Удар меня тоже.
Matt The Ninja 16 апр. 2014, в 14:47

1

Вместо использования toggleClass() попробуйте использовать addClass() и removeClass():

$("#foo").hover(

    function() {

        $("#bar", this).addClass("hidden");
    }, function() {

        $("#bar", this).removeClass("hidden");
});

Этот способ позволяет вам более точно контролировать элементы.

siannone 16 апр. 2014, в 13:39

Ещё вопросы

Контекстный селектор здесь бесполезен, идентификатор должен быть уникальным.
Это правильный ответ, который вы ищете :) Удар меня тоже.

A. Wolff · Accepted Answer · 2014-04-16T13-53-00.000Z

Никто не упоминает об этом, но называет псевдо-событие accept in/out handler, поэтому вы можете переключать класс:

$("#foo").hover(function () {
    $("#bar").toggleClass("hidden");
});

И поскольку идентификаторы должны быть уникальными в контексте документа, не нужно передавать контекст, а только элемент цели с идентификатором.