如何显示和隐藏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