由于这是我在这里发表的第一篇文章， 非常感谢大家的大力支持。
现在进入正题...
我在一页上有 2 个 Accordion 。 如何防止展开 2 个 Accordion 选项卡？ 我的意思是，如果第一个 Accordion 中的选项卡已展开，那么当单击第二个 Accordion 中的选项卡时，我希望折叠此选项卡。
花了很多时间在网络和 Stack Overflow 上搜索，但一无所获。
示例代码:
Javascript:
$(function() {
$( ".myAccordion" ).accordion({
collapsible: true,
active: -1
});
});
HTML:
<div>Category One</div>
<div class="myAccordion">
<h3>Title1</h3>
<div>Text1</text>
<h3>Title2</h3>
<div>Text2</text>
</div>
<div>Category Two</div>
<div class="myAccordion">
<h3>Title1</h3>
<div>Text1</text>
<h3>Title2</h3>
<div>Text2</text>
</div>
我尝试添加更改启动选项:
changestart: function(event, ui) {
$('h3.ui-accordion-header').removeClass('ui-state-active ui-corner-top').addClass('ui-state-default ui-corner-all');
$('div.ui-accordion-content').slideUp();
$('div.ui-accordion-content').removeClass('ui-accordion-content-active ui-corner-top').addClass('ui-corner-all');
$('span.ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
}
这可以解决问题，但仅限于第一次单击选项卡时。 当您第二次单击该选项卡时，它根本不会改变。您必须第三次单击它才能使其再次展开。
任何帮助将不胜感激。 再次感谢...
最佳答案
在我玩了一会儿并没有找到任何解决方案之后，我决定离开 ui-accordion 并制作自己的一个!我相信这是解决我的问题的最佳方案!
由于我不需要花哨的样式，所以我使用此代码来实现我需要的结果:
<body>
<h1>Category 1</h1>
<div class="accTabs">
<a class="accLink" href="#">
<div class="tab-title">Tab Title</div>
<div class="tab-slide" style="display:none;">Tab Content to Slide</div>
</a>
</div>
<div class="accTabs">
<a class="accLink" href="#">
<div class="tab-title">Tab Title</div>
<div class="tab-slide" style="display:none;">Tab Content to Slide</div>
</a>
</div>
<h1>Category 2</h1>
<div class="accTabs">
<a class="accLink" href="#">
<div class="tab-title">Tab Title</div>
<div class="tab-slide" style="display:none;">Tab Content to Slide</div>
</a>
</div>
<div class="accTabs">
<a class="accLink" href="#">
<div class="tab-title">Tab Title</div>
<div class="tab-slide" style="display:none;">Tab Content to Slide</div>
</a>
</div>
<script>
$("a.accLink").click(function () {
var $that = $(this),
$children = $that.children('div.tab-slide');
// If expanded tab was clicked, collapse it.
// >> FIXED LOGIC ERROR >> if ($children.hasClass("slided")) {
if ($that.hasClass("slided")) {
$children.slideUp("slow", function () {
$that.removeClass("slided");
});
} else {
// Collapse all expanded tabs
// FIXED LOGIC ERROR >> $("div.slided").slideUp("slow", function() {
$(".slided").find("div.tab-slide").slideUp("slow", function () {
$(".slided").removeClass("slided");
});
// Expand clicked tab
$children.slideDown("slow", function () {
$that.addClass("slided");
});
}
});
</script>
</body>
更新脚本:修复逻辑错误，使其 100% 正常运行
关于javascript - jQuery 多个 Accordion |仅展开一个选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9371548/