我有一个 jQuery 选项卡，我有一些选项卡。我有一个带有两个面板的 jquery-ui Accordion ，第一个选项卡中的第 1 节和第 2 节。在第二个选项卡中还有另一个带有两个面板的 Accordion 。出于某种原因，面板的(h3 标签内的 div)第二个选项卡上 Accordion 的高度设置为 0px 和显示:无和垂直滚动出现在两个面板上，正如我在 Internet Explorer 调试器中看到的那样(参见链接中所附的图片): http://snag.gy/6pmYd.jpg

问题仅在于第二个选项卡上的 Accordion :面板的大小未调整为最高的面板。这是 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"); 
        } 
    }); 
}); 

其余代码与上面发布的代码相同。

现在的问题如下:最初第一个选项卡处于事件状态，因此显示的第一个 Accordion 及其第一个面板被激活和展开。然后，当我切换到第二个选项卡时，只有第一次，第二个 Accordion (accordion2) 被显示并且它的第一个面板被激活，但是面板没有调整到它的内容:它显示垂直滚动条，我不想要那个。然后，如果我切换到第一个选项卡，然后再切换到第二个选项卡，那么它就会工作， Accordion 2被激活并且它的第一个面板被激活并显示，没有垂直滚动条出现并且面板正在根据其内容进行完美调整。问题是我第一次从第一个选项卡切换到 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; 
} 

请，不要投反对票!

请您参考如下方法:

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

这肯定是您和我正在寻找的。 HeightStyle 设置为“内容”解决了我的问题。