当另一个打开时关闭手风琴面板 [英] Closing accordion panels when another opens

问题描述

我正在研究手风琴专家组。他们都打开很好，但我无法弄清楚如何让他们打开另一个元素。

I'm working on an accordion panel group. They all open just fine, but I can't figure out how to get them to close upon opening another element.

以下是我正在处理的代码：

Here is what I'm working on in terms of code:

<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代码，但似乎没有任何工作。

I have tried to create new ids to call in JS/JQuery code, but nothing seems to be working.

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

我认为它在我的剧本中，但我不是百分之百因为我做错了。

I figure it's in my script, but I'm not 100% on what I'm doing wrong.

推荐答案

我更新了你的小提琴，希望能解决你的问题=）
这是jQuery。查看小提琴

I updated your fiddle, hope that solves your problem =) Here is the jQuery. Check out the 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元素单击事件中，所有手风琴将返回其初始状态，关闭并使用右侧的加号。手风琴的详细部分仅在手风琴关闭时才会出现，以防止手风琴在打开时被隐藏和出现。如果手风琴关闭，细节部分将出现，加号将变为减号。

On an ".expand" element click event all accordions will return to their initial state, closed and with the plus sign on the right. The accordion's detail section will only appear if that accordion is closed, to prevent it from hiding and appearing if clicked when opened. If the accordion is closed the detail section will appear and the plus sign will change to the minus one.

这篇关于当另一个打开时关闭手风琴面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！