Javascript 鼠标单击可折叠行

我在互联网上找到了一个很好的可折叠内容的例子，但它还没有完成

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

而你'；我们将在30天内即时访问所有功能，绝对免费。我们没有'；不要要求您的信用卡详细信息或任何承诺。

---

单击行时如何展开或隐藏示例中的答案？

使用此选项，切换并查找答案

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

如果要动态添加行，请不要忘记启用：

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

---

将单击事件绑定到行，并使用

.find（）

.应答器{
显示：无；
}
$（文件）
.on（'单击'，'行'，函数（）{
$（this.find（'.answer wrapper'）.slideToggle（）；
})
;

---

如果将事件绑定到文档，则不必担心由于ajax调用或动态内容而导致DOM更改。

即使不使用JS，也可以仅使用CSS来实现。请看这个例子：

可折叠>.item{
显示：块；
光标：指针；
保证金：5px；
}
.collappable>.item>.row{
显示：块；
背景:#bbb ;；
填充物：5px；
}
.collappable>.item>.content{
显示：无；
背景：ddd；
填充物：5px；
}
.collapsable>.item>输入[类型=复选框]{
显示：无；
}
.collapsable>.item>输入[类型=复选框]：选中+.content{
显示：块；
}

一排
内容1
第2排
内容2
第3排
内容3

将事件直接分配给“$”（“.row”）可能导致触发多个事件。您应该绑定到DOM中较高的一个节点，该节点不会更改。这是正确的。您可以使用：$（'.container'）。在（'click'，'.row'，function（）{//other statement}）上，代码工作不正常。当我展开它时，它会再次自动隐藏。

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

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