鼠標點擊摺疊行

Question

我在互聯網上找到了一個非常好的可摺疊內容示例，但尚未完成。

<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> 

當我點擊行時，該如何展開或隱藏答案？

Answer 1

綁定一個click事件行和隱藏/顯示使用兒童.find()

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

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

http://jsfiddle.net/7bz5au97/

如果將事件綁定到文檔，則不必擔心由於ajax調用或動態內容導致的DOM更改。

Answer 2

使用此，切換並找到

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

不要忘了使用上，如果你是動態添加您行：

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

Answer 3

即使沒有使用CSS的JS，也可以這樣做。剛看到這個例子：（ '行'）

.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>