Question

这是我在这里的第一篇文章，我非常感谢你们所有人的大力支持。

现在到了......

我在一个页面上有2支手风琴。如何防止扩展2个手风琴标签？我的意思是，如果第一个手风琴的标签被展开，我希望这个标签在第二个手风琴中点击一个标签时折叠。

花了很多时间在网上搜索和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选项：

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');
}

这就是诀窍，但只是第一次点击了一个标签。当您再次单击该选项卡时，它根本不会更改。您必须第三次单击它才能再次展开。

任何帮助将非常感谢。再次感谢...

Answer 1

在我玩了一点但没有找到任何解决方案之后，我决定离开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％功能

Answer 2

您希望将accordion()附加到容器元素，而不是实际的div。

例如：

<div id='accordion'>
    <h3><a href='#'>Category One</a></h3>
    <div class="myAccordion">
       <h3>Title1</h3>
       <div>Text1</text>
       <h3>Title2</h3>
       <div>Text2</text>
     </div>

    <h3><a href='#'>Category Two</a></h3>
    <div class="myAccordion">
       <h3>Title1</h3>
       <div>Text1</text>
       <h3>Title2</h3>
       <div>Text2</text>
    </div>
</div>

然后是你的剧本：

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

jQuery Multiple Accordions |只有一个标签扩展

2 个答案: