Fare üzerinde daraltma satırını tıklatın

Question

İnternette Katlanabilir İçeriğin çok iyi bir örneğini buldum ancak tamamlanmamış.

<div class="container faq_wrapper"> 
    <div class="row"> 
     <div class="span10 offset1"> 
      <p> 
       &nbsp;</p> 
      <div class="faq-all-actions"> 
       <a class="faq-expand" onclick="jQuery('.answer-wrapper').css('display','block');">Expand All</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="faq-collapse" onclick="jQuery('.answer-wrapper').css('display','none');">Collapse All</a></div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="span10 offset1"> 
      <div class="question-wrapper"> 
       <div class="arrow"> 
        &nbsp;</div> 
       <div class="big-q"> 
        Q</div> 
       <div class="question"> 
        <h6>Can I try the software before I buy it?</div></h6> 
       <div class="answer-wrapper"> 
        <div class="big-a"> 
         A</div> 
        <div class="answer"> 
         Yes! Simply <a href="/trial">download a free trial</a> and you&#39;ll have instant access to all features for 30 days, absolutely free. We don&#39;t require your credit card details or any commitment.</div> 
       </div> 
      </div>  
     </div> 
    </div> 
</div> 

Satırı tıklattığımda bu örnekte yanıtı nasıl genişletebilir veya gizleyebilirim?

Answer 1

Bind satıra bir tıklama etkinliğini ve gizlemek kullanarak çocuk .find()

<style> 
    .answer-wrapper { 
     display: none; 
    } 
</style> 

$(document) 
    .on('click','.row',function(){ 
     $(this).find('.answer-wrapper').slideToggle(); 
    }) 
; 

http://jsfiddle.net/7bz5au97/

Etkinliği belgeye bağlarsanız, ajax çağrıları veya dinamik içerik nedeniyle DOM değiştiğinden endişe etmenize gerek kalmaz.

Answer 2

kullanımı bu, geçiş ve bulmak

$('.row').click(function(){ 
    $(this).find('.answer-wrapper').toggle(); 
}) 

dinamik Satırlarınızı ekliyorsanız kullanmak unutma: göstermek/

$('.row').on('click',function(){ 
    $(this).find('.answer-wrapper').toggle(); 
}) 

Answer 3

Sadece CSS kullanarak JS olmadan bile yapabilirsiniz. Sadece bu örneğe bakın: ('satır') olay atama

.collapsible > .item { 
 
    display: block; 
 
    cursor: pointer; 
 
    margin: 5px; 
 
} 
 
.collapsible > .item > .row { 
 
    display: block; 
 
    background: #bbb; 
 
    padding: 5px; 
 
} 
 
.collapsible > .item > .content { 
 
    display: none; 
 
    background: #ddd; 
 
    padding: 5px; 
 
} 
 
.collapsible > .item > input[type=checkbox] { 
 
    display: none; 
 
} 
 
.collapsible > .item > input[type=checkbox]:checked + .content { 
 
    display: block; 
 
}

<div class="collapsible"> 
 
    <label class="item"> 
 
    <span class="row">Row 1</span> 
 
    <input type="checkbox" /> 
 
    <span class="content">Content 1</span> 
 
    </label> 
 
    <label class="item"> 
 
    <span class="row">Row 2</span> 
 
    <input type="checkbox" /> 
 
    <span class="content">Content 2</span> 
 
    </label> 
 
    <label class="item"> 
 
    <span class="row">Row 3</span> 
 
    <input type="checkbox" /> 
 
    <span class="content">Content 3</span> 
 
    </label> 
 
</div>