我有一个 jQuery 选项卡，我有一些选项卡。我有一个 jquery-ui 手风琴，在第一个选项卡中有两个面板，第 1 节和第 2 节。还有另一个手风琴，在第二个选项卡中有两个面板。出于某种原因，第二个选项卡上手风琴的面板（h3 标签内的 div）高度设置为 0px，并且 display:none 和垂直滚动出现在两个面板上，正如我在 Internet Explorer 调试器中看到的那样（参见链接中的图片): http://snag.gy/6pmYd.jpg
问题仅在于第二个选项卡上的手风琴：面板没有调整到最高的。它是 jQuery 选项卡的错误吗？
<style>
/* IE has layout issues when sorting (see #5413) */
.group { zoom: 1 }
</style>
<div id="tabs">
<ul>
<li><a href="#ComponentsTab">Components</a></li>
<li><a href="#OthersTab">Capsules</a></li>
</ul>
<div id="ComponentsTab">
<div id="accordion"> <!-- style= "width: 790px;" -->
<div class="group">
<!-- First Panel 'Add Component' -->
<h3>Add component</h3>
<div>
@using (Html.BeginForm("AddField", "Configure", FormMethod.Post))
{
<label id="NumberOfItems" for="amount">@Resource.ComponentNumberOfItems</label>
<input type="text" name="amount" id="amount" />
<div id="slider-range-max"></div>
<div id="componentId">
@Html.LabelFor(m => m.ComponentViewModel.SelectedCompTypeId, new { @id = "componentIdLabel" })
@Html.DropDownListFor(m => m.ComponentViewModel.SelectedCompTypeId,
Model.ComponentViewModel.CompTypeItems)
</div>
<div class="componentGroup">
<label id="NameCompLabel" for="NameComp">Name:</label>
@Html.TextBox("NameComp", null, new { @class = "textStyle" })
</div>
<div class="componentGroup">
<label id="DescCompLabel" for="DescComp">Description:</label>
@Html.TextBox("DescComp", null, new { @class = "textStyle" })
</div>
<div class="componentGroup">
<input id="submitAddComp" type="submit" value="@Resource.ButtonTitleAddComponent" />
</div>
}
</div> <!-- end first panel 'Add Component' -->
</div> <!-- end group -->
<div class="group">
<!-- Second Panel 'Filter' -->
<h3>Filters</h3>
<div>
@using (Ajax.BeginForm("Search", "Component",
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "jqGrid",
OnSuccess = "showGrid()"
}))
{
<!-- Drop down list for component types -->
<div id = "componentTypeFilter">
@Html.LabelFor(m => m.ComponentViewModel.SelectedCompTypeId, new { id = "componentFilterLabel" })
@Html.DropDownListFor(m => m.ComponentViewModel.SelectedCompTypeId, Model.ComponentViewModel.CompTypeItems)
</div>
<!-- Apply filter button for components -->
<div id="ApplyFilterComponents" >
<input type="submit" name="_search" value="@Resource.CaptionComponentApplyFilter" />
</div>
}
</div>
</div> <!--end group -->
</div> <!-- end accordion -->
<!--
<div id="jqGrid">
@Html.Partial("../Grids/_ComponentGrid")
</div>
-->
</div> <!-- End First tab -->
<div id="OthersTab">
<div id="accordion2"> <!-- style ="width: 790px;" -->
<div class="group">
<h3>Add others</h3>
<div>
@using (Html.BeginForm("AddOthers", "Configure", FormMethod.Post))
{
<div id="itemId">
@Html.LabelFor(m => m.ItemViewModel.SelectedItemTypeId, new { @id = "itemIdLabel" })
@Html.DropDownListFor(m => m.ItemViewModel.SelectedItemTypeId,
Model.ItemViewModel.TypeItems)
</div>
<div class="itemGroup">
<label id="NameItemLabel" for="NameItem">Name:</label>
@Html.TextBox("NameItem", null, new { @class = "textStyle" })
</div>
<div class="itemGroup">
<label id="DescItemLabel" for="DescItem">Description:</label>
@Html.TextBox("DescItem", null, new { @class = "textStyle" })
</div>
<div class="itemGroup">
<input id="submitAddItem" type="submit" value="@Resource.ButtonTitleAddItem" />
</div>
}
</div>
</div> <!--end group -->
<div class="group">
<h3>Filters</h3>
<div>
@using (Ajax.BeginForm("Search", "Items",
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "jqGridItems",
OnSuccess = "showGridItems()"
}))
{
<!-- Drop down list of item types -->
<div id = "itemTypeFilter">
@Html.LabelFor(m => m.ItemViewModel.SelectedItemTypeId, new { id = "itemFilterLabel" })
@Html.DropDownListFor(m => m.ItemViewModel.SelectedItemTypeId,
Model.ItemViewModel.TypeItems)
</div>
<!-- Apply filter button for items -->
<div id="ApplyFilterItems" >
<input type="submit" name="_search" value="@Resource.CaptionItemsApplyFilter" />
</div>
}
</div>
</div> <!-- end group -->
</div> <!-- end accordion -->
<!--
<div id="jqGridItems">
@Html.Partial("../Grids/_ItemsGrid")
</div>
-->
</div> <!-- end second tab -->
</div> <!-- End tabs -->
脚本：
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.9.1.js")"></script>
<script type="text/javascript">
// -------------------------------------------------------------------------------------------------
// Slider functionality
// -------------------------------------------------------------------------------------------------
$(function () {
$("#slider-range-max").slider({
range: "max",
min: 1,
max: 255,
value: 1,
slide: function (event, ui) {
$("#amount").val(ui.value);
}
});
$("#amount").val($("#slider-range-max").slider("value"));
});
function showTabs() {
$("#tabs").tabs ();
};
$(document).ready(function () {
showTabs();
});
// Below makes tabs sortable (Their position can be altered)
$(function () {
var tabs = $("#tabs").tabs();
tabs.find(".ui-tabs-nav").sortable({
axis: "x",
stop: function () {
tabs.tabs("refresh");
}
});
});
$(function () {
function subscribe_accordion_to_hoverintent_event(accordionId) {
$(accordionId).accordion({
header: "> div > h3",
event: "click hoverintent"
});
}
subscribe_accordion_to_hoverintent_event("#accordion");
subscribe_accordion_to_hoverintent_event("#accordion2");
});
// Collapse content
$(function () {
function set_accordion_as_collapsible(accordionId) {
$(accordionId).accordion({
collapsible: true//,
//eightStyle: "auto"
});
}
set_accordion_as_collapsible("#accordion");
set_accordion_as_collapsible("#accordion2");
});
// Sortable functionality
$(function () {
function set_accordion_as_sortable(accordionId) {
$(accordionId).sortable({
axis: "y",
handle: "h3",
stop: function (event, ui) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children("h3").triggerHandler("focusout");
}
});
}
set_accordion_as_sortable("#accordion");
set_accordion_as_sortable("#accordion2");
});
/*
* hoverIntent | Copyright 2011 Brian Cherne
* http://cherne.net/brian/resources/jquery.hoverIntent.html
* modified by the jQuery UI team
*/
$.event.special.hoverintent = {
setup: function () {
$(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
},
teardown: function () {
$(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
},
handler: function (event) {
var currentX, currentY, timeout,
args = arguments,
target = $(event.target),
previousX = event.pageX,
previousY = event.pageY;
function track(event) {
currentX = event.pageX;
currentY = event.pageY;
};
function clear() {
target
.unbind("mousemove", track)
.unbind("mouseout", clear);
clearTimeout(timeout);
}
function handler() {
var prop,
orig = event;
if ((Math.abs(previousX - currentX) +
Math.abs(previousY - currentY)) < 7) {
clear();
event = $.Event("hoverintent");
for (prop in orig) {
if (!(prop in event)) {
event[prop] = orig[prop];
}
}
// Prevent accessing the original event since the new event
// is fired asynchronously and the old event is no longer
// usable (#6028)
delete event.originalEvent;
target.trigger(event);
} else {
previousX = currentX;
previousY = currentY;
timeout = setTimeout(handler, 100);
}
}
timeout = setTimeout(handler, 100);
target.bind({
mousemove: track,
mouseout: clear
});
}
};
</script>
CSS：
.elementStatus
{
visibility: hidden;
}
.image{
/*float: left;
margin-top: 2px;
padding-top: 1px;
padding-left: 10px;
width: 35px;*/
margin-top: 5px;
text-align: center;
vertical-align: middle;
}
.text{
/*float: left;
margin-top: 1px;
padding-left: 14px;
padding-bottom: 2px;
width: 35%;*/
font-weight: bold;
font-size: 1em;
text-align: center;
vertical-align: middle;
margin-bottom: 2px;
}
#accordion2 .ui-accordion-content
{
max-height: 400px;
overflow-y: auto;
}
#accordion, #accordion2
{
width: 790px;
padding-top: 10px;
margin-top: 10px;
margin-left: 0px;
margin-right: 0px;
}
#ComponentTypeFilterLabel
{
font-size: 1em;
margin-top: 11px;
float: left;
}
#componentTypeFilter, #itemTypeFilter
{
margin-top: 10px;
margin-left: 12px;
float: left;
}
#ApplyFilterComponents, #ApplyFilterItems
{
padding-left: 20px;
float: left;
}
#ApplyFilterComponents input, #ApplyFilterItems input
{
margin-top: 22px;
font-size: 1em;
}
#NumberOfItems
{
text-align: left;
width: 150px;
float: left;
margin-right: 1px;
padding-top: 5px;
font-size: 1em;
}
#amount
{
text-align: left;
color: #f6931f;
font-weight: bold;
border-top-color: currentColor;
border-right-color: currentColor;
border-bottom-color: currentColor;
border-left-color: currentColor;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin-top: 0px;
margin-left: 1px;
width: 555px;
padding-top: 5px;
padding-left: 5px;
padding-right: 1px;
margin-right: 1px;
}
#componentFilterLabel, #itemFilterLabel
{
font-size: 1em;
}
#componentId, #itemId
{
height: 55px;
font-size: 1em;
float: left;
text-align: left;
font-weight: 600;
}
#componentIdLabel, #itemIdLabel
{
margin-bottom: 5px;
height: 21px;
margin-top: 25px;/*0px; */
padding-bottom: 0px;
font-size: 1em;
}
#NameCompLabel, #NameItemLabel
{
margin-left: 0px;
margin-top: 25px;
padding-left: 14px;
font-size: 1em;
}
#DescCompLabel, #DescItemLabel
{
margin-left: 5px;
margin-top: 25px;
padding-left: 10px;
font-size: 1em;
}
#NameComp, #NameItem
{
float: left;
margin-left: 15px;
margin-top: 0px;
font-size: 1em;
}
#DescComp, #DescItem
{
float: left;
margin-top: 0px;
margin-left: 15px;
font-size: 1em;
}
#submitAddComp, #submitAddItem
{
margin-top: 40px;
margin-left: 15px;
font-size: 1em;
}
.componentGroup, .itemGroup
{
float: left;
}
.textStyle
{
width : 150px;
}
这导致在每个面板中显示我不想要的垂直滚动条。
所以如果我从 ie 开发工具（调试器）中取消选中这些属性，那么所有面板都将设置为我想要的最高面板的高度。那么如何在div中设置呢？使用内联样式或CSS？
几乎可以工作： 我已经更新了我的脚本，现在它几乎可以工作了。我所做的是修改 $(document).ready(...) 中的代码，见下文：
$(document).ready(function () {
var tabs = $("#tabs").tabs({
activate: function (event, ui) {
$("#accordion2").accordion({
activate: function (event, ui) {
$(ui.newPanel).css('height', '100');
$(ui.newPanel).css('min-height', '100');
$(ui.newPanel).css('max-height', '400');
}
}); // End Accordion
} // End Activate tab
}); // End tabs
tabs.find(".ui-tabs-nav").sortable({
axis: "x",
stop: function () {
tabs.tabs("refresh");
}
});
});
其余代码与上面发布的相同。
现在的问题如下：最初第一个选项卡处于活动状态，因此第一个手风琴显示其第一个面板被激活并展开。然后，当我切换到第二个选项卡时，仅第一次显示第二个手风琴 (accordion2) 并激活了它的第一个面板，但面板没有调整其内容：它显示垂直滚动条，我不希望那样。然后，如果我切换到第一个选项卡，然后再次切换到第二个选项卡，那么它就可以工作了，accordion2 被激活并且它的第一个面板被激活并显示，没有垂直滚动条出现并且面板正在完美地调整到它的内容。问题是我第一次从第一个选项卡切换到手风琴2 所在的第二个选项卡。那么如何强制手风琴2的面板调整到它的内容呢？
最终解决方案
$(document).ready(function () {
$("#accordion2").accordion({
header: "> div > h3",
event: "click hoverintent",
collapsible: true
});
var tabs = $("#tabs").tabs();
});
并在 css 文件中：
#accordion2 .ui-accordion-content
{
height: 100px;
max-height: 400px;
}
请不要投反对票！