javascript - 当另一个面板打开时关闭 Accordion 面板

Question

我正在一个 Accordion 小组工作。它们都打开得很好，但我不知道如何让它们在打开另一个元素时关闭。

这是我正在处理的代码:

<div class="container">
  <div class="row">
    <div id="trickslist">
      <ul>
        <li>
          <a class="expand">
            <div class="right-arrow">+</div>
            <div>
              <h2 class="tipstricks">Exploring your Motivations to Quit Tobacco</h2>
            </div>
          </a>
          <div class="detail">

          </div>
        </li>           
        <li>
          <a class="expand">
            <div class="right-arrow">+</div>
            <h2 class="tipstricks">Avoiding weight gain or alcohol</h2>
          </a>
          <div class="detail">

          </div>
        </li>
        <li>
          <a class="expand">
            <div class="right-arrow">+</div>
            <h2 class="tipstricks">Making your plan stick: relapse prevention</h2>
          </a>
          <div class="detail">

          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

我尝试创建新的 id 来在 JS/JQuery 代码中调用，但似乎没有任何效果。

var $myGroup = $('#trickslist');
$myGroup.on('show.bs.collapse', '.collapse', function () {
    $myGroup.find('.collapse.in').collapse('hide');
});

我认为这是在我的脚本中，但我并没有 100% 知道我做错了什么。

Answer 1

我更新了你的 fiddle ，希望能解决你的问题=) 这是 jQuery。查看Fiddle

$(".expand").on("click", function () {
    $(".right-arrow").text("+");
    $(".detail:visible").slideUp();
    if(!$(this).next().is(":visible")){

        $(this).next().slideDown(200);
        $(this).find(".right-arrow").text("-");
    }
});

[已编辑]

在“.expand”元素单击事件上，所有 Accordion 将返回到其初始状态，关闭并在右侧带有加号。仅当 Accordion 关闭时， Accordion 的详细信息部分才会出现，以防止在打开时单击时隐藏和显示。如果关闭 Accordion ，将出现详细信息部分，并且加号将更改为减号。