鼠标点击折叠行

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>

当我点击行时，如何展开或隐藏来自示例的答案？

- Peter Penzov

Answer 1

你甚至可以在没有JS的情况下仅使用CSS来实现。只需查看此示例：

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

- Taras Romaniv

Answer 2

将点击事件绑定到行，并使用.find()隐藏/显示子元素。

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

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

http://jsfiddle.net/7bz5au97/

如果将事件绑定到文档上，就不用担心由于ajax调用或动态内容导致DOM变化的问题。

- zgr024

---

代码没有正常工作。当我展开它时，它会自动隐藏。 - Peter Penzov

Answer 3

使用这个，切换并查找

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

如果你正在动态添加行，请不要忘记使用on：

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

- sumanthapamagar

---

将事件直接分配给$('.row')可能导致多个事件被触发。您应该绑定到DOM中不会改变的更高级节点。 - zgr024

没错。你可以使用：$('.container').on('click','.row', function(){ //其他语句 }) - sumanthapamagar