如何顯示和隱藏div

Question

我正在創建一個頁面，當我單擊某個文本時，出現一個div，當我單擊相同的文本時，div消失。

這裏是我的HTML代碼：

<div id="description" class="tab-pane fade"> 
    <div class="faq-row">      
     <a href="javascript:;" class="faq-row-handle">Business Friendly Environment</a> 
    </div> 
    <div class="col-md-12 faq-row-content">      
     <ul> 
      <li> 
       LR's spacious apartments provide ample room for work and play. 
      </li> 
      <li> 
       Guests can access high speed internet and cable television from every room. 
      </li> 

     </ul> 
    </div>      
    <div class="faq-row"> 
     <a href="javascript:;" class="faq-row-handle">Business Friendly Environment</a> 
    </div> 
    <div class="col-md-12 faq-row-content">      

     <ul> 
      <li> 
       LR's spacious apartments provide ample room for work and play. 
      </li> 
      <li> 
       Guests can access high speed internet and cable television from every room. 
      </li> 

     </ul> 
    </div>      
</div> 

我需要的是，當我點擊第一個鏈接，然後第一div出現和消失;當我點擊第二個鏈接時，第二個div出現並消失。 在這一點上，當我點擊一個鏈接，沒有任何反應。

這裏是我的jQuery代碼：

$(document).ready(function(){ 
    $(".faq-row-handle").click(function(){ 
     $(".faq-row-content").slideToggle(); 
    }); 
}); 

Answer 1

使用$(this)而不是類選擇爲目標的next()元素slideToggle()：

$(document).ready(function(){ 
    $(".faq-row-handle").click(function(){ 
     $(this).parent().next().slideToggle(); 
    }); 
}); 

See this fiddle