JQuery: het vervolgkeuzemenu verdwijnt niet meer nadat u buiten het menu hebt geklikt

Ik ben nieuw bij jQuery en ik kijk naar de code van Google om hun 'Meer' knop te maken. Ik heb het werkend atm, maar de enige manier om het vervolgkeuzemenu te laten verdwijnen, is door nogmaals op de knop 'Meer' te klikken. Is er een methode die ik kan toevoegen om dit te veranderen zodat elke klik buiten het drop-down menu zelf het zal sluiten? Bedankt voor het inzicht!

http://jsfiddle.net/rKaPN/1/

4
toegevoegd
Bekeken: 4
de bron

4 antwoord

Koppel een klikgebeurtenis aan html om elke gemaakte klik vast te leggen en zorg ervoor dat deze het menu verbergt

$("html").click(function() {
  menu.find('.active').removeClass('active');
});

Then override that on your menu's click event using .stopPropagation();

menu.find('ul li > a').bind('click', function (event) {
  event.stopPropagation();

Fiddle: http://jsfiddle.net/rKaPN/12/

7
toegevoegd
de bron
niet een erg goede oplossing, want bij elke klik zal dit elke keer een hoop onnodig werk doen, wanneer het menu al verborgen is
toegevoegd de auteur Rajat Gupta, de bron
heel erg bedankt, waardeer de hulp
toegevoegd de auteur trying_hal9000, de bron

U zou dit ook kunnen toevoegen, zodat de gebruiker niet hoeft te klikken

$("body:not(.menu)").hover(function(){ $(".menu").find('.active').removeClass('active');})
1
toegevoegd
de bron
leuk ik vind dit ook heel leuk, zal dit zeker bewaren als ik het op de weg nodig heb
toegevoegd de auteur trying_hal9000, de bron

Maak bij opening van het menu een transparante overlay-div met dezelfde breedte en hoogte van het venster. Na klikken op die div sluit je het menu en vernietig je de div.

0
toegevoegd
de bron

In plaats van elke klik op het html dom-element te testen, kunt u een vervaginggebeurtenis aan het specifieke menu-item binden wanneer u het actief maakt en het vervolgens uitschakelen wanneer de vervaginggebeurtenis wordt geactiveerd. Vervang deze paar regels:

  //displaying the drop down menu
  $(this).parent().parent().find('.active').removeClass('active');
  $(this).parent().addClass('active');

met deze:

  //displaying the drop down menu
  $('.active').removeClass('active');
  $(this).parent().addClass('active');
  $(this).blur(function() {
      $('.active').removeClass('active');
  });
0
toegevoegd
de bron