navbar에서 div가 선택되지 않은 경우 div를 자동으로 숨기려면 어떻게합니까?

Question

나는 dropdown-Navbar에서 클릭했을 때 이미 div 쇼를 만들었습니다. 하지만 모든 사업부가 보여주기를 원하지는 않습니다. 예를 들어 div1을 표시하기 위해 탐색 표시 줄을 클릭 한 다음 navbar (div2 등)에서 다른 div를 클릭하면 div2가 표시되고 div1이 이제 숨겨집니다. 다른 사업부들도 마찬가지입니다.

여기 내 드롭 다운 탐색 모음 코드가 있습니다.

<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>  

여기에 자바 스크립트입니다 : (여기 놓친 무엇을 했습니까?)

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

여기 그때 보여 선택하지 않은 경우 숨길 된 div입니다.

<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. 이 내가 하나 네비게이션 바에 하나에 모든 이들의를 선택하면 표시 할 DIV 컨테이너의 형식을 참조 할 수 있습니다. 다른 div 컨테이너를 선택하지 않으면 어떻게 숨길 수 있습니까?

텍스트 머리글이 div 컨테이너라는 것을 알 수 있습니다.

Answer 1

여기에 한 가지 방법이 있습니다. 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 - 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(); 
});