可折叠面板不扩展

时间:2011-11-04 12:18:52

标签: javascript jquery css panel

我的代码中有一个可折叠的面板。它会在鼠标点击时扩展和碰撞。但是,如果我已经折叠了div并触发了一个更新div的ajax调用,我希望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();

请帮忙。 感谢。

1 个答案:

答案 0 :(得分:2)

jQuery函数.next()使得下一个兄弟姐妹没有后代,所以.collapibleContainer的兄弟undefined将是.find() ....你可以使用$(".collapsibleContainer").find('div').show();

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

.closest()

{{1}}

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