JQuery Переключить при наведении мыши
У меня есть следующий jQuery:
$('#account-menu').hide();
$("#account-link").click(function(e) {
e.preventDefault();
$("#account-menu").toggle();
$("#account-link").toggleClass("selected");
});
Что я хочу сделать, это проверить, нажимает ли пользователь где-либо еще на экране, пока МЕНЮ АККАУНТА не отображается, но не в самом меню учетной записи, и если это так, то скрыть меню. Кто-нибудь может помочь?
Спасибо
РЕДАКТИРОВАТЬ: я хотел сделать это сам, как это:
$('#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 ответа
Может быть, что-то вроде этого...
$('#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");
});
ОБНОВИТЬ
Так что это не будет полностью работать, так как щелчок по телу срабатывает, когда вы тоже щелкаете по ссылке. Это шаг в правильном направлении. Г / л
ОБНОВЛЕНИЕ № 2
Я наконец получил эту работу над JSFiddle.net, используя комментарии Joseph Le Brech
(+1). Проверьте живую Демо. Я не мог получить $('body')
там работает селектор, поэтому я имитирую тело с помощью div bodyDiv
, Это все прокомментировано и работает на 100%. Удачного кодирования.