jQuery Toggle n'autorise aucun contenu

Question

Je travaille sur trois divs en fonction d'un menu de trois liens.

Cela fonctionne très bien, sauf que je veux éviter d'avoir aucun div affichage. En d'autres termes, il devrait toujours y avoir une div affichée. En ce moment, si vous cliquez deux fois sur un élément de menu, le div disparaît complètement.

jsFiddle: http://jsfiddle.net/sf23103/raervcLj/5/

HTML:

<a id="menu1" class="menu" data-item="#directory_default">Default</a> | 
<a id="menu2" class="menu" data-item="#directory_alpha_first_name">First Name</a> | 
<a id="menu3" class="menu" data-item="#directory_alpha_last_name">Last Name</a> 

<div id="directory_default" style="">Default Content goes here.....</div> 
<div id="directory_alpha_first_name" style="display: none;">First Name content goes here....</div> 
<div id="directory_alpha_last_name" style="display: none;">last name content goes here....</div> 

JQUERY:

$(document).ready(function() { 
    $('.menu').click(function() { 
     var $clicked = $(this) 
     $('.menu').each(function(){ 
      var $menu = $(this); 
      if (!$menu.is($clicked)) 
      { 
       $($menu.attr('data-item')).hide(); 
      } 
     }); 
     $($clicked.attr('data-item')).toggle(); 
    }); 
}); 

Answer 1

Actuellement, vous êtes en train de masquer tout ce qui n'est pas cliqué, puis de cliquer sur celui qui a été cliqué. Donc, si celui qui est cliqué est déjà affiché, en le basculant le cachera.

Remplacer

if (!$menu.is($clicked)) 
{ 
    $($menu.attr('data-item')).hide(); 
} 

Avec

$($menu.attr('data-item')).hide(); 

De cette façon, vous cacher tout, et sera toujours basculer uniquement sur celui qui a été cliqué.

Answer 2

Je réduis votre code juste

$('.menu').click(function() { 
 
    $('[id^="directory_"]').hide() 
 
    $($(this).data('item')).show(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="menu1" class="menu" data-item="#directory_default">Default</a> | 
 
<a id="menu2" class="menu" data-item="#directory_alpha_first_name">First Name</a> | 
 
<a id="menu3" class="menu" data-item="#directory_alpha_last_name">Last Name</a> 
 

 
<div id="directory_default" style="">Default Content goes here.....</div> 
 
<div id="directory_alpha_first_name" style="display: none;">First Name content goes here....</div> 
 
<div id="directory_alpha_last_name" style="display: none;">last name content goes here....</div>

Sur un clic, masquez tous les div commençant par directory_, puis affichez celui avec l'ID correspondant en fonction de l'attribut de données.