jQuery Accordion 在活动时第一次单击后中断：设置 false
我的网站上有一个 jQuery 手风琴已经有一段时间了，它似乎工作正常，直到我今天检查它，它坏了。我已经好几个星期没有碰过 HTML 了。我已经重新浏览了手风琴文档，似乎没有任何改变，所以我不知道发生了什么。
我将手风琴的“active”属性设置为“false”，这样手风琴就不会在文档加载时显示活动部分。我还将“collapsible”设置为“true”，就像指定的文档一样。为了确保它不是页面上的另一个元素，我创建了一个全新的页面，其中只有最基本的手风琴元素，但它仍然无法工作。
问题是，单击第一个手风琴部分后，单击任何其他部分都不起作用 - 您只能打开该部分。我注意到删除“活动”属性完全解决了这个问题，但是当然在文档加载时有一个活动部分打开，这是我不想要的。
<!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，我只能“折叠”一个部分两次，然后发生同样的事情 - 这些部分锁定并停止折叠/打开。
I've had a jQuery accordion on my site for a bit now, and it seemed to be working fine until I checked on it today and it is broken. I haven't touched the HTML in weeks. I've gone through the accordion documentation all over again, and it doesn't seem anything has changed, so I have no clue what is going on.
I had the accordion "active" property set to "false", so that the accordion would not display an active section on document load. I also had "collapsible" set to "true", like the documentation specified. Just to be sure it wasn't another element on the page, I created a whole new page with just the most basic accordion elements on it, and it still won't work.
The problem is that, after clicking on the first accordion section, clicking on any of the other ones doesn't work- you're stuck with that section open. I noticed that removing the "active" property altogether fixed this problem, but then of course there is an active section open on document load, which I don't want.
<!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>
I also noticed that if I remove active: false, and leave collapsible: true, I am only able to "collapse" a section twice, and then the same thing happens- the sections lock up and stop collapsing/opening.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
好吧，我立即看到了以下问题：
通过不指定 修订版（版本中的最后第三位数字）您将自动获得 jQuery 和 jQuery UI 的最新版本。那么为什么它突然停止为您工作是因为 jQuery UI 已更新，并且对 UI Accordion 进行了更改。
解决此问题的最佳方法是指定修订版本。从当前版本 (1.8.7) 一直向下，直到它适合您为止。例如，
alwaysOpen打开已被删除或更改。您应该检查文档并查看哪些选项可用。另外，你可以尝试一下我正在处理的jsFiddle：
Well, I immediatly saw the following problem:
By not specifying the revision (last third digit in the version) you will automatically get served the latest version of both jQuery and jQuery UI. So why it suddenly stopped working for you was because jQuery UI got updated, and changes were made to the UI Accordion.
Best way to solve this is to specify the revision. Walk down from the current version (1.8.7) and downwards until it's working for you. For example, the
alwaysOpenopen have been removed or changed. You should check the docs and see which options are available.Also, you can try this which I've got working on jsFiddle:
heightStyleType
控制手风琴和每个面板的高度。可能的值：
“auto”：所有面板都将设置为最高面板的高度。
“fill”：根据手风琴的父高度扩展到可用高度。
“内容”：每个面板的高度仅与其内容一样高。
代码示例：
heightStyleType
Controls the height of the accordion and each panel. Possible values:
"auto": All panels will be set to the height of the tallest panel.
"fill": Expand to the available height based on the accordion's parent height.
"content": Each panel will be only as tall as its content.
Code example: