简单的展开/折叠div > JQuery？

Question

我需要在我的应用程序中的一系列父容器div中添加一些手风琴样式的展开/折叠句柄。这对于像jQuery这样的库来说是否太简单了？

示例：

<div class="handleDiv"> expand | collapse
    <div>child element</div>
    <div>child element</div>
</div>

<div class="handleDiv"> expand | collapse
    <div>child element</div>
    <div>child element</div>
</div>

- Scott B

---

http://docs.jquery.com/UI/Accordion - Wadih M.

这个标记是固定的，还是你可以控制它？例如，你能把子元素包装在一个容器 div 中吗？ - Nick Craver

@Nick：我完全掌控它。 - Scott B

Answer 1

我刚刚编写了一个插件来实现这个功能。请查看http://sylvain-hamel.github.io/simple-expand/。

- Sylvain

---

这个插件非常好，但是初学者应该注意将脚本<script>$('.expander').simpleexpand();</script>放在页面底部（就在</body>标签之前）。 - Grant_Bailey

很高兴插件有所帮助。你可以将此脚本标签放在任何位置。但请确保调用被包裹在jQuery的“DOM就绪”回调中：<script type="text/javascript"> $(function () { $('.expander').simpleexpand(); }); </script>。这几乎适用于所有与jQuery相关的事情。 - Sylvain

Sylvain是正确的，但作为一名初学者，我必须尝试将<script type="text/javascript"> $(function () { $('.expander').simpleexpand(); }); </script>放置在不同的位置，而且只有在头部才能使它正常工作。(比如，在我的情况下，将其放入Rails erb局部文件中是无效的) - Ben

Answer 2

可以尝试这样做：

$('.handleDiv').click(function() {
    $(this).children().toggle();
});

每当您单击它们时，它们将展开或隐藏“handleDiv”的内容。我建议将这些“展开|折叠”事物变成链接，并将点击处理程序附加到它们上面，以便在 div 中的任何位置单击都不会切换它。

如果您希望它们一开始关闭，请在样式表中将它们设置为关闭状态：

.handleDiv div {
    display: none;
}

或者在我答案开头的jQuery代码片段末尾添加".hide()"。

- bhollis

---

我认为你想在CSS中使用.handleDiv div。 - Nick Craver