jQuery: menus apparaissent / disparaissent sur un clic

Question

Je l'ai cherché partout sur le web et je ne peux pas trouver une solution. Je suis très nouveau à jQuery ainsi.

Mon cas:

J'ai une barre de navigation, chaque lien il active / déclenche une megamenu (chaque lien a sa propre megamenu).

Ce que je besoin:

je besoin d'un moyen d'avoir chaque lien activer sa propre megamenu, la megamenu doit se fermer lorsque:

1. L'utilisateur clique sur un autre élément dans la barre de navigation.

2. L'utilisateur clique sur le même élément dans la barre de navigation.

3. L'utilisateur clique sur un 'bouton de fermeture' (X) à l'intérieur du graphique megamenu (non représenté dans le code HTML pour l'amour de la simplicité).

HTML:

<div id="top-nav">
 <ul>
  <li><span>Products &amp; Services</span>
    <ul>
      <li><div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Support &amp; Training</span>
    <ul>
     <li> <div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Communities</span>
    <ul>
     <li> <div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Store</span>
    <ul>
      <li><div class="megamenu">Content here...</div></li>
    </ul>
  </li>
 </ul>
</div>

Je l'ai vu le script de « Sexy Drop Down Menu », mais le problème est qu'il ferme le menu déclenché par le clic sur le vol stationnaire, et comme je le disais, je suis nouveau jQuery et je ne peux pas comprendre une façon de l'adapter à mes besoins.

http://www.sohtanaka.com/web-design / examples / déroulant menu /

Toute aide serait grandement appréciée.

Merci.

Answer 1

Vous joindre un gestionnaire de clic à un autre élément / même article / bouton de fermeture qui lirait quelque chose comme ceci:

$(function(){
    $('#top-nav span').click(function(){
        divTrigger = $('#top-nav span').index(this);
        thisMegaMenu = $('.megamenu:eq('+divTrigger+')');
        $('.megamenu').slideUp(200);
        if(thisMegaMenu.is(":not(':visible')")){
        thisMegaMenu.slideDown(200);
        }
});
    $('.megamenu').append("<a href=# id=closeButton>x</a>");
    $('#closeButton').live('click',function(){
        thisMegaMenu.slideUp(200);
    });
});

Essayez ici

Answer 2

J'ai été en mesure d'obtenir cette autre solution qui fonctionne comme un charme ainsi:

$(function(){
//Megamenus
$('#top-nav li').click(function(){//set up a click event for the li
    $(this).siblings('.active').click();//click any other lis which are active to close their menus
    $(this).find('.megamenu').toggle();//toggle the child megamenu
    $(this).toggleClass('active');//toggle a class so we can identify any open megamenus
});

$('.megamenu').click(function(event){//hide the megamenu on load and set up a click event..
    $(this).parents('li').click();//..that just clicks the parent li
    event.stopPropagation();//stop the click bubbling up to the parent li
  });
});

Mon problème est maintenant lequel des deux solutions est préférable d'utiliser? Ceci est un bon problème maintenant si: p

Solution fournie à: http://codingforums.com/showpost.php?p= 1016305 & postcount = 2

Answer 3

Pour chacun des <li>s de niveau supérieur dans la barre de navigation, donnez-leur une classe comme « navbar ». Ensuite, votre jQuery pourrait ressembler à ceci:

$('li .navbar').click(function() {
  if($(this).find('.megamenu').is(':visible')) { // Already open
    $(this).find('.megamenu').hide();
  } else { // Close others first
    $('.megamenu').each(function() {
      $(this).hide();
    });
    $(this).find('.megamenu').show();
  }
});

Vous serait tout simplement besoin d'ajouter le gestionnaire de clic pour le bouton Fermer. Remarque, ce code non testé est alors laissez-moi savoir s'il y a un problème.