jQuery Accordion 无法为内容设置高度答案

【问题标题】：jQuery Accordion not working to set height to contentjQuery Accordion 无法为内容设置高度
【发布时间】：2013-09-15 22:58:04
【问题描述】：

我正在尝试根据我在 stackoverflow 中研究的内容来修改手风琴，但高度仍然没有改变——它仍然是最高面板的高度。有人可以告诉我我做错了什么或错过了什么吗？这是我在 HEAD 中输入的内容--

<link rel="stylesheet"   href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#accordion" ).accordion({
  collapsible: true
});
</script>
<script>
$(".selector").accordion({ autoHeight: false }); 
</script>

谢谢。

【问题讨论】：

标签： jquery html css user-interface accordion

【解决方案1】：

现有代码存在三个问题。以下代码应该适合您：

$(function() {
    $("#accordion" ).accordion({
        collapsible: true,
        heightStyle: "content"
    });
});

您没有使用相同的选择器来设置您的手风琴。
您没有将后来的代码放在.ready() 中，因此如果手风琴式 HTML 位于脚本标签下方，它将无法正常工作。
jQuery accordian 没有 autoHeight 选项。根据文档，您应该一直在使用 heightStyle。

如果这些更改未能解决您的问题，请同时提供您的 HTML。

【讨论】：

乔希，给出了很好的回应。我想补充一点，Accordian 的默认设置为“auto”，这意味着所有面板都将设置为最高面板的高度。

【解决方案2】：

这对我有用：

<script type="text/javascript">
$(function() {
    $( "#accordion" ).accordion({ heightStyle: "content", autoHeight: false, });
});
</script>

干杯。

【讨论】：

【解决方案3】：

试试这个：

<script>
    $(function() {
        $( "#accordion" ).accordion({
            heightStyle: "content"
        });
    });
</script>

【讨论】：

【解决方案4】：

这解决了我的问题

  $(function() {
    $( "#accordion" ).accordion({
       collapsible: true,
       autoHeight: false
    });
  });

【讨论】：

【解决方案5】：

你正在寻找，

heightStyle: "content"

如，

<script type="text/javascript">
$(function() {
    $( "#accordion" ).accordion({ heightStyle: "content" });
 });
</script>

来自documentation：

设置 heightStyle: "content" 允许手风琴面板保持他们的原始身高。

edit：我就是为什么人们建议 autoHeight: false，因为这甚至不是 .accordion 的选项。在此处查看 api 以获取完整的选项列表：http://api.jqueryui.com/accordion/

【讨论】：

【解决方案6】：

@Nikos Gr 的答案应该是你所需要的，只有你应该选择将脚本插入到外部文件中，确保在链接到所有 jquery UI 文件之后链接到 HTML 中的脚本，如下所示：

首先你的 jQuery 文件

<link rel="stylesheet" href="../JQUERY/jquery-ui-1.12.1.custom/jquery-ui.min.css">
<script src="../JQUERY/jquery-ui-1.12.1.custom/external/jquery/jquery.js">
</script>
<script src="../JQUERY/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>

然后你自己的js

<script src="animate.js"></script>

在该文件中，包含@Nikos GR 编写的代码，以及@Josh Mein 的提示：

$(document).ready(function () {

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

});

应该没问题！如果您希望脚本在您的 HTML 中，请执行相同操作，但在“<script>”元素中不包含“src”属性。

【讨论】：