JQuery Переключить при наведении мыши - PullRequest
3 голосов
/ 11 февраля 2011

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

$('#account-menu').hide();

$("#account-link").click(function(e) {
     e.preventDefault();
     $("#account-menu").toggle();
     $("#account-link").toggleClass("selected");
});

То, что я хочу сделать, это проверить, нажимает ли пользователь где-либо еще на экране В то время как МЕНЮ АККАУНТА ПОКАЗАНО НО не внутри самого меню учетной записи, а если так, то скрыть меню. Кто-нибудь может помочь?

Спасибо

EDIT: Я попытался сделать это сам так:

$('#account-menu').hide();

    $("#account-link").click(function(e) {
        e.preventDefault();
        $("#account-menu").toggle('fast');
        $("#account-link").toggleClass("selected");
    });

    $(document).mouseup(function(e) {
        var $targ = $(e.target);

        // if we are the link or the box, exit early
        if ($targ.is('#account-link') || $targ.is('#account-menu')) return;
        // if we have a parent who is either, also exit early
        if ($targ.closest('#account-link, #account-menu').length) return;

        // hide the box, unselect the link
        $("#account-link").removeClass("selected");
        $("#account-menu").hide('fast');
    });

Но хотел посмотреть, есть ли более хороший и гораздо меньший (по кодам) способ сделать это.

Ответы [ 2 ]

1 голос
/ 11 февраля 2011

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

$('#account-menu').hide();

$('body').click(function(){
    $("#account-menu:visible').toggle();
    $("#account-link").removeClass("selected");
});

$("#account-link").click(function(e) {
    e.preventDefault();
    $("#account-menu:not:visible").toggle();
    $("#account-link").addClass("selected");
});

ОБНОВЛЕНИЕ

Так что это не будет работать полностью, так как щелчок по телу срабатывает при нажатии на ссылкутоже.Это шаг в правильном направлении.G / L

ОБНОВЛЕНИЕ # 2

Я наконец-то получил эту работу над JSFiddle.net, используя комментарии от Joseph Le Brech (+1). Посмотрите живую демоверсию .Я не смог заставить работать селектор $('body'), поэтому я имитирую тело с помощью div, называемого bodyDiv.Это все прокомментировано и работает на 100%.Счастливого кодирования.

...