скрытие div, когда перезагрузить веб-страницу

0

Я хочу, чтобы 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>
Теги:

1 ответ

0

Вы почти там, попробуйте этот код:

$(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() позволяет вам показать или скрыть элемент в зависимости от текущего состояния элемента, поэтому, если он будет скрыт, он покажет его, если он уже будет виден, он скроет его.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню