Jquery ui 嵌入jQuery选项卡时的jQuery ui手风琴高度问题

我有一个jQuery选项卡，我有一些选项卡。我有一个jQueryUI，它有两个面板，第一个选项卡中的第1节和第2节。另一个手风琴在第二个标签上有两个面板。由于某些原因，第二个选项卡上accordion的面板（h3标记内的div）高度设置为0px，并显示：无，两个面板都出现垂直滚动，正如我在internet explorer调试器中看到的（请参阅链接中附带的图像）：

问题只出现在第二个选项卡上的手风琴上：面板的大小没有调整到最高的面板。这是jQuery选项卡的一个bug吗

<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 -->

这将导致在每个面板中显示我不希望看到的垂直滚动条

因此，如果我从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");
        }
    });
});

代码的其余部分保持与上面发布的相同

现在的问题是：最初第一个选项卡处于活动状态，因此第一个手风琴显示，其第一个面板处于激活和展开状态。然后，当我切换到第二个选项卡时，只有第一次，第二个accordion（accordion2）被显示，并且它的第一个面板被激活，但是面板并没有调整到它的内容：它显示的是垂直滚动条，我不希望这样。然后，如果我切换到第一个选项卡，然后再切换到第二个选项卡，那么它就工作了，accordion2被激活，它的第一个面板被激活并显示，没有出现垂直滚动条，它正在完全调整面板以适应其内容。问题是我第一次从第一个选项卡切换到第二个选项卡，其中accordion2是。那么，如何强制accordion2的面板调整到其内容呢

最终解决方案

$(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;
}

---

请不要投反对票

将“高度”设置为0的原因是其他选项卡被隐藏，并且在构建accordion插件时动态计算高度。解决此问题的一种方法是使用tab activate事件，仅当tab处于活动状态且高度设置正确时，才构建手风琴。[JSFiddle]

---

这当然是你和我想要的。HeightStyle设置为“content”解决了我的问题。

我加入了redmond theme的jquery-ui-1.10.3.custom.css、jquery-1.10.2.js和jquery-ui-1.10.3.custom.min.js，那么问题出在哪里？我认为有了这些css和js就足够了。还有，为什么我的另一个手风琴（手风琴2）可以使用两个面板，而手风琴1也可以使用两个面板却不能使用？为什么将accordion1的高度设置为0px？请参阅此处的所有代码以更好地理解：啊..您正在a选项卡中使用它。将“高度”设置为0的原因是其他选项卡被隐藏。解决此问题的一种方法是使用tab activate事件来构造accordion。{code>$（“#tabs”）.tabs（{activate:function（event，ui）{if（ui.newPanel.attr（'id'）=='tabs-2'）{$（'#acordion2'）.acordion（）}我检查了您所说的内容，但它不起作用，我检查了当单击tabs-2时，会引发tab activate事件，但accordion2中的面板表现相同。问题是我使用的是jquery选项卡，第一个选项卡中的第一个accordion，默认选中的选项卡，没有问题，因为这在第一个选项卡中，默认情况下是第一个tab如图所示，问题出在您所说的其他选项卡上，但您提出的解决方案还不起作用。我使用的是jquery 1.9.1我已经完成了这里讨论的内容：还有这里：但没有任何东西对我有效……有什么想法吗？

$(document).ready(function () {

    $("#accordion2").accordion({
        header: "> div > h3",
        event: "click hoverintent",
        collapsible: true
    });

    var tabs = $("#tabs").tabs();
});

#accordion2 .ui-accordion-content
{
    height: 100px;
    max-height: 400px;
}

$(function(){
    $( "#tabs" ).tabs({
      activate: function( event, ui ) {
          if((ui.newPanel.attr('id') === 'tabs-2') && (checkIfNotAccordion) )
          {
              $('#accordion2').accordion();
          }
       }
    });
});

$("#DivName" ).accordion({
        heightStyle: "content"
    });