jQuery кнопка toggle

Question

У меня есть кнопка, которая переключает всплывающее меню. Я могу заставить меню исчезнуть, если вы нажмете за пределами меню, но теперь моя кнопка переключения не работает. Если я снова нажму кнопку, меню останется. Как я могу заставить меню исчезнуть, если вы переключаете кнопку или вы нажимаете на контейнер?

jsFiddle: http://jsfiddle.net/PPcfN/

$('.quicklinks-rollover').click(function() { 
    $('.quicklinks').toggle(); 
}); 
$(document).mouseup(function (e) { 
    var container = $(".quicklinks"); 
    if (container.has(e.target).length === 0) { 
     container.hide(); 
    } 
}); 

Answer 1

Функция MouseUp должна заботиться о нажатия на кнопку (Quicklinks-опрокидывание). Если констатировала все это здесь: http://jsfiddle.net/8VUnq/1/

$(document).mouseup(function (e) { 
    var popup = $('#quickLinksPopup'), 
     button = $('#quickLinksToggle'); 
    if (popup.is(':visible') 
     && !popup.is(e.target) 
     && !button.is(e.target) 
     && popup.has(e.target).length === 0 
     && button.has(e.target).length === 0) { 
     popup.toggle(); 
    } 
}); 

Имейте в виду, эти две вещи:

1. Используйте идентификаторы для обозначения элементов быстрее и предотвратить множественные конфликты всплывающих
2. Использование события мыши на всей странице не рекомендуется, так как событие будет запускаться очень часто, попробуйте использовать альтернативный метод, например, добавить кнопку закрытия во всплывающем окне или, чтобы быть более эффективным, подумайте о добавлении слушателя мыши к показу всплывающего окна и удаление его на шкуре.

Вы можете определить состояние всплывающего окна с помощью: $ (popup) .is (': visible') или is (': hidden').

Answer 2

Try:

var $quicklinks = $('.quicklinks'); 
var msOverLinks = false; 

$('.quicklinks-rollover').click(function() { 
    $quicklinks.toggle(); 
}); 

$quicklinks.mouseenter(function() { 
    msOverLinks = true; 
}).mouseleave(function() { 
    msOverLinks = false; 
}); 

$(document).mouseup(function (e) { 
    if(! msOverLinks) { 
     $quicklinks.toggle(); 
    } 
}); 

Answer 3

Вы можете сделать это нормальный скрыть и показать метод. Поскольку в основном переключения() функция привычка работает должным образом ...

положить кнопку HTML с атрибутом р = "закрыто" по умолчанию:

 <button class="quicklinks-rollover" p="closed" title="Quick Links">toggle</button> 

Изменить Ваш Jquery:

  $('.quicklinks-rollover').click(function() { 
      var a = $(this).attr("p"); 
      var container = $(".quicklinks"); 
      if(a=="closed"){ 
       container.show(); 
       $(this).attr("p","open"); 
      }else{ 
       container.hide(); 
       $(this).attr("p","closed"); 
      } 
     }); 
    $(document).mouseup(function (e) { 
     var container = $(".quicklinks"); 
     if (container.has(e.target).length === 0) { 
      container.hide(); 
     } 
    }); 

Answer 4

Причина такого поведения: mouseup() привязывается, когда я выполняю команду click() на div. Вы можете проверить это поведение, добавив сообщение console.log в .mouseup.

Так что вместо этого попробуйте, как показано ниже.

$('.quicklinks-rollover').on('click', function (e) { 
    $('.quicklinks').toggle(); 
    e.stopImmediatePropagation(); 
}); 

$(document).click(function (e) { 
    var container = $(".quicklinks"); 
    console.log(container.has(e.target).length); 
    if (container.has(e.target).length === 0) { 
     container.hide(); 
    } 
}); 

Working Fiddle