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（）允许您显示或隐藏元素，具体取决于元素的当前状态，因此如果它被隐藏，它将显示它，如果它已经可见，它将隐藏它。

重新加载网页时隐藏div

1 个答案: