jQuery手风琴不起作用，无法将高度设置为内容

Question

我正在尝试根据我在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>

谢谢。

- Macki XCarl

Answer 1

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

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

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

如果这些更改没有解决您的问题，请提供您的HTML。

- Josh Mein

---

Josh 给出了很好的回答。我想补充一下，Accordian 的默认设置是 "auto"，这意味着所有面板的高度都将设置为最高面板的高度。 - Dan Nick

Answer 2

这对我有用：

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

欢呼。

- alsantos123

Answer 3

试试这个：

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

- Nikos Grigoriadis

Answer 4

这解决了我的问题。

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

- Asccort

Answer 5

你正在寻找，

heightStyle: "content"

就像这样，

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

来自文档：

将heightStyle设置为"content"可以使手风琴面板保持其原生高度。

编辑：我不知道为什么有人建议将autoHeight设置为false，因为这甚至不是.accordion的选项。在此处查看完整选项列表：http://api.jqueryui.com/accordion/

- Jean

Answer 6

@Nikos Gr的回答应该是你所需要的一切，只有当你选择将脚本插入到外部文件中时，请确保在HTML中链接到所有jquery UI文件之后再链接到脚本，就像这样：

首先是你的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”属性。

- thebugsdontwork