jQuery Menu déroulant Fonctionnalité basée sur les événements Click (masquage de l'aide)

Question

J'ai deux menus jQuery qui s'affichent correctement lorsque vous cliquez sur "show".

Par exemple, disons que vous avez deux liens:

"Afficher 1", "Afficher 2"

Vous cliquez sur "Afficher 1", puis un div apparaît avec "show 1 contenu"

Vous cliquez sur "Show 2", puis un div apparaît avec "contenu show 2"

Je l'ai fonctionné à ce point.

Évidemment, il y a quelques choses que je dois aborder. Si je clique sur "Show 1" puis que je clique sur "Show 2", je veux que "Show 1's Content" disparaisse (masquer le contenu "show 1 content")

Une autre chose, si je clique n'importe où sur la page , quelle que soit la liste déroulante active, je veux la cacher si je clique en dehors de la boîte de contenu.

Ma structure dom:

ul 
li.menu 
    span= link_to 'Show 1' 
    ul.dropdown.hidden 
    li= link_to 'show 1 content' 
li.menu 
    span= link_to 'Show 2' 
    ul.dropdown.hidden 
    li= link_to 'show 2 content' 

Mes js:

$("#search li.menu span a").click(function(event) { 
    event.preventDefault(); 
    $(this).parent().siblings("ul.dropdown").toggleClass("hidden"); 
    }); 

Donc, fondamentalement, j'ai juste besoin de comprendre comment appliquer caché en cliquant en dehors de la boîte de ul.dropdown et comment appliquer caché lorsque vous cliquez sur une autre zone UL.dropdown

Merci.

Answer 1

Ajoutez une classe à tous les éléments qui doivent être masqués. Lorsque vous cliquez en dehors de la liste déroulante ou lorsque vous cliquez sur un lien "Afficher", commencez par masquer tout. S'il s'agit d'un lien "Afficher", affichez ce qui doit être affiché.

Answer 2

Vous devez lier l'événement click au document et vérifier la cible (délégation d'événement). Si la cible est en dehors de la navigation, cachez les listes déroulantes et retournez.

Exemple:

<ul id="nav"> 
    <li class="menu"> 
     <span><a href="#">Show 1</a></span> 
     <ul class="dropdown"> 
      <li><a href="#">Show 1 content</a></li> 
     </ul> 
    </li> 
    <li class="menu"> 
     <span><a href="#">Show 2</a></span> 
     <ul class="dropdown"> 
      <li><a href="#">Show 2 content</a></li> 
     </ul> 
    </li> 
</ul> 
<script> 

var nav = $('#nav'); 
nav.find('ul.dropdown').hide(); 

$(document).bind('click', function(e) { 
    var target = $(e.target); 
    if (target.closest('#nav').length < 1) { 
     nav.find('ul.dropdown').hide(); 
     return; 
    } 
    if (target.parent().is('span')) { 
     var li = target.closest('li.menu'); 
     li.siblings().find('ul.dropdown').hide(); 
     li.find('ul.dropdown').toggle(); 
     e.preventDefault(); 
    } 
}) 

</script>