折叠面板不展开答案

【问题标题】：Collapsible panel not expanding折叠面板不展开
【发布时间】：2011-11-04 12:18:52
【问题描述】：

我的代码中有一个可折叠面板。它在鼠标点击时展开和折叠。但是，如果我折叠了 div 并触发了 ajax 调用来更新 div，我希望 div 像以前一样处于展开状态。我一直在试图找到丢失的东西，但无法得到它。使用的 CSS：

.collapsibleContainerTitle div
{
padding: 5px 0 5px 19px;
background: url('images/bg_cpanel.png') top left no-repeat;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
color: #00425f;
color: rgba(0, 66, 95, 1);
font-size: 1.25em;
}
.collapsibleContainerContent
{
padding: 10px;
}
.collapsibleContainerContent legend
{
display: none;
}
.collapsibleContainerTitle div {
background:url('images/bg_cpanel_expanded.jpg') top left no-repeat;
}
.collapsibleContainerTitleClosed div {
background:url('images/bg_cpanel_collapsed.jpg') top left no-repeat; 
}
.collapsibleContainerTitleDisable div {
background:url('images/bg_cpanel_disabled.jpg') top left no-repeat;
}
.collapsibleContainerContent {
padding:10px;
border:#EDEDED 1px solid;
}
.collapsibleContainerContent legend {
display:none;
}

这是可折叠面板区域：

<fieldset style="width: 800px;" title="Search Results" id="fldRes" class="collapsibleContainer">
<div id="results">
<button id="btn1"> Generate </button>
</div></fieldset>

我只是在写这个 JS 代码：

$(".collapsibleContainer").next().show();

请帮忙。谢谢。

【问题讨论】：

你能把这段代码放到 jsFiddle 上吗，那么对所有人来说都很容易。 :)

标签： javascript jquery css panel

【解决方案1】：

jQuery 函数 .next() 获取下一个 Sibling 而不是后代，因此 .collapibleContainer 的兄弟将是 undefined .... 你可以使用 .find() ：

$(".collapsibleContainer").find('div').show();

或.closest()

$(".collapsibleContainer").closest('div').show();

http://jsfiddle.net/manseuk/YQTxQ/

【讨论】：

哇....与 $(".collapsibleContainer").find('div').show();谢谢，ManseUK。