hidding div當重新加載網頁

Question

我希望div在開頭隱藏（m_royal和m_suite）。然後當我點擊時，只顯示一個必須可見並隱藏div的其餘部分。 問題是，當我重新加載我的頁面時，它才起作用。

JS

$(document).ready(function(){ 
    $(".contExp .post div").hide(); 

    $('.contExp .post a').click(function(){ 
     $(".contExp .post div").hide(); 
     var id = $(this).attr('id'); 
     id = id.split('_');        
     $(".contExp .post #m_"+id).show();    
    }); 
}); 

CSS

.contExp .post{font-size: 12px; margin-left: 5px; color:#505050;} 
.contExp .post a{cursor:pointer;} 

HTML

<div class="contExp">     
     <div class='post'>       
      <a id='royal'>+/- Detail</a> 
      <div id='m_royal'>      
     -- Content to show 1 
      </div> 
     </div> 
     <div class='post'>       
      <a id='suite'>+/- Detail</a> 
      <div id='m_suite'>          
     -- Content to show 2 
     </div> 
     </div> 
    </div> 

Answer 1

就快，試試這個代碼：

$(document).ready(function(){ 
    $(".contExp .post div").hide(); 

    $('.contExp .post a').click(function(){ 
     $(this).parent().find('div').toggle();    
    }); 
}); 

或檢查此琴：http://jsfiddle.net/C9D2J/1/

只要你點擊<a>元素很快，它會搜索裏面它的父爲一個div並切換這一點。 toggle（）允許你顯示或隱藏一個元素，這取決於元素的當前狀態，所以如果隱藏，它會顯示它，如果它已經可見，它會隱藏它。