jQuery Accordion 在第一次点击后中断：设置为 false答案

【问题标题】：jQuery Accordion breaks after first click when active: false is setjQuery Accordion 在第一次点击后中断：设置为 false
【发布时间】：2011-06-08 20:35:23
【问题描述】：

我的网站上有一个 jQuery 手风琴已经有一段时间了，它似乎工作正常，直到我今天检查它并且它坏了。我已经好几周没碰过 HTML 了。我又检查了accordion documentation，似乎没有任何变化，所以我不知道发生了什么。

我将手风琴的“活动”属性设置为“假”，这样手风琴就不会在文档加载时显示活动部分。我也将“可折叠”设置为“真”，就像指定的文档一样。为了确保它不是页面上的另一个元素，我创建了一个全新的页面，上面只有最基本的手风琴元素，但它仍然无法工作。

问题是，在单击第一个手风琴部分后，单击任何其他部分都不起作用 - 您被困在该部分打开的情况下。我注意到删除“活动”属性完全解决了这个问题，但是当然在文档加载时打开了一个活动部分，这是我不想要的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
  $(document).ready(function() {
    $("#accordion").accordion({active: false, alwaysOpen: true, autoHeight: false, collapsible: true});
  });
</script>
</head>
<body>
<div id="accordion">

    <p><a href="#">1</a></p>
    <div>this</div>

    <p><a href="#">2</a></p>
    <div>isn't</div>

    <p><a href="#">3</a></p>
    <div>working</div>

    <p><a href="#">4</a></p>
    <div>correctly</div>

</div>
</body>
</html>

我还注意到，如果我删除 active: false 并保留 collapsible: true，我只能“折叠”一个部分两次，然后会发生同样的事情 - 部分锁定并停止折叠/打开。

【问题讨论】：

标签： javascript jquery accordion

【解决方案1】：

嗯，我马上看到了以下问题：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

通过不指定revision（版本中的最后第三位数字），您将自动获得最新版本的 jQuery 和 jQuery UI。那么为什么它突然停止为您工作是因为 jQuery UI 得到了更新，并且 UI Accordion 发生了变化。

解决此问题的最佳方法是指定修订版。从当前版本（1.8.7）向下走，直到它适合你。例如，alwaysOpen open 已被删除或更改。您应该检查docs 并查看哪些选项可用。

另外，你可以试试我正在处理的这个jsFiddle：

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

【讨论】：

谢谢，成功了！下次我会记住版本号。

【解决方案2】：

heightStyleType

控制手风琴和每个面板的高度。可能的值：

“auto”：所有面板都将设置为最高面板的高度。
“fill”：根据手风琴的父级高度展开到可用高度。
“内容”：每个面板的高度仅与其内容一样高。

代码示例：

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

【讨论】：