简单的展开/折叠div> jQuery的? [英] Simple Expand/Collapse divs > JQuery?

问题描述

我需要在我的应用程序中向一系列父容器div添加一些Accordian样式的展开/折叠句柄.对于像jquery这样的库来说，这太简单了吗?

I need to add some accordian style expand/collapse handles to a series of parent container divs in my application. Is this something that's too simple for a library like 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>

推荐答案

尝试如下操作:

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

只要您单击"handleDiv"的内容，它们就会展开或隐藏.我建议建立那些展开|折叠"的东西链接，并将点击处理程序附加到它们上，以便div中任何位置的点击都不会切换它.

That'll expand or hide the contents of the "handleDiv"s whenever you click them. I'd suggest making those "expand | collapse" things links and attaching the click handler to them, though, so that a click anywhere in the div doesn't toggle it.

如果您希望它们以封闭状态开始，请在样式表中设置封闭状态:

If you want them to start out closed, either style them closed in your stylesheet:

.handleDiv div {
    display: none;
}

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

or add a ".hide()" to the end of the jQuery snippet at the beginning of my answer.

这篇关于简单的展开/折叠div> jQuery的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！