Comment faire le div masquer automatiquement lorsqu'il n'est pas sélectionné dans la barre de navigation?

Question

J'ai déjà fait le spectacle div quand j'ai cliqué dessus dans la barre de navigation déroulante. Mais je ne veux pas faire tous les divs à montrer. Par exemple j'ai cliqué de la barre de navigation pour montrer div1, puis quand j'ai cliqué un autre div de la barre de navigation (div2 par exemple) div2 apparaîtra alors div1 devrait maintenant être caché. Idem avec les autres divs.

Voici mon code pour la barre de navigation déroulante.

<li class="dropdown"> 
<a href="" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-edit"></i><span>Manage Events</span> <b class="caret"></b></a> 
<ul class="dropdown-menu"> 
    <li><a value="mteam" href="#" onclick="show_div('spanplayers');">Manage Team Players</a> 
    </li>   
    <li><a value="mschedule" href="#" onclick="show_div('spanschedule');">Manage Game Schedule</a> 
    </li>   
    <li><a value="mresult" href="#" onclick="show_div('spanresult');">Manage Game Results</a> 
    </li>   
</ul>  

Voici le javascript: (Qu'est-ce que j'ai manqué ici?)

<script> 
//Functon to show divs from the nav menu 
function show_div(toShow) 
{ 
    var show = document.getElementById(toShow); 
    show.style.display = "block"; 
} 
</script> 

est ici les divs que je veux montrer alors cacher lorsqu'ils ne sont pas sélectionnés.

<div class="span12" id="spanplayers" style="display:none" data-pg-collapsed> 
          <!-- /widget -->         
          <div class="widget"> 
           <div class="widget-header"> 
            <i class="icon-bar-chart"></i> 
            <h3>Manage Team Players Panel</h3> 
           </div>          
           <!-- /widget-header -->          
           <div class="widget-content"> 
            <!-- /form-content --> 
           </div>          
           <!-- /widget-content -->          
          </div>         
         </div> 
         <div class="span12" id="spanschedule" style="display:none" data-pg-collapsed> 
          <!-- /widget -->         
          <div class="widget"> 
           <div class="widget-header"> 
            <i class="icon-bar-chart"></i> 
            <h3>Manage Game Schedule Panel</h3> 
           </div>          
           <!-- /widget-header -->          
           <div class="widget-content"> 
            <!-- /form-content --> 
           </div>          
           <!-- /widget-content -->          
          </div>         
         </div> 
         <div class="span12" id="spanresult" style="display:none" data-pg-collapsed> 
          <!-- /widget -->         
          <div class="widget"> 
           <div class="widget-header"> 
            <i class="icon-bar-chart"></i> 
            <h3>Manage Game Result Panel</h3> 
           </div>          
           <!-- /widget-header -->          
           <div class="widget-content"> 
            <!-- /form-content --> 
           </div>          
           <!-- /widget-content -->          
          </div>         
         </div> 

Here's the screenshot. Si vous pouvez voir c'est le format des conteneurs div que je veux être montré quand il est sélectionné dans la barre de navigation, un par un pas tous. Comment puis-je cacher d'autres conteneurs div quand ils ne sont pas sélectionnés.

Voici l'extrait que les en-têtes de texte sont les conteneurs div. Codepen

Answer 1

Voici une façon de le faire. http://codepen.io/anon/pen/GWagmp

<ul class="menu"> 
    <li class="dropdown"> 
    Manage Events 
    <ul class="dropdown-menu"> 
     <li><a value="mteam" href="#" onclick="show_div('spanplayers');">Manage Team Players</a> 
     </li>   
     <li><a value="mschedule" href="#" onclick="show_div('spanschedule');">Manage Game Schedule</a> 
     </li>   
     <li><a value="mresult" href="#" onclick="show_div('spanresult');">Manage Game Results</a> 
     </li>  
    </ul> 
    </li> 
    <li class="dropdown"> 
    Manage Events 
    <ul class="dropdown-menu"> 
     <li><a value="mteam" href="#" onclick="show_div('spanplayers');">Manage Team Players</a> 
     </li>   
     <li><a value="mschedule" href="#" onclick="show_div('spanschedule');">Manage Game Schedule</a> 
     </li>   
     <li><a value="mresult" href="#" onclick="show_div('spanresult');">Manage Game Results</a> 
     </li>  
    </ul> 
    </li> 
</ul> 

CSS

.menu > li { 
    display:inline-block; 
    padding: 10px; 
} 
.dropdown { 
    position: relative; 
} 

.dropdown-menu { 
display:none; 
position: absolute; 
top:100%; 
left: 0; 
} 
.dropdown-menu.open { 
    display: block; 
} 

JS - en utilisant jquery

$(".dropdown").click(function() { 
    $(".dropdown-menu").removeClass("open"); 
    $(".dropdown-menu", this).toggleClass("open"); 
}); 
$(window).click(function() { 
$(".dropdown-menu").removeClass("open"); 
}); 
$(".dropdown").click(function(event){ 
    event.stopPropagation(); 
});