当另一个打开时关闭手风琴面板答案

【问题标题】：Closing accordion panels when another opens当另一个打开时关闭手风琴面板
【发布时间】：2016-12-07 22:18:42
【问题描述】：

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

以下是我正在编写的代码：

<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% 知道我做错了什么。

【问题讨论】：

见getbootstrap.com/javascript/#collapse
这篇文章可能会对您的问题有所帮助。 stackoverflow.com/questions/11645501/…
不幸的是，似乎没有解决问题。其他面板保持打开状态。我整理了一个小提琴来展示我所拥有的：fiddle.jshell.net/28zhrrcd

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

我更新了你的小提琴，希望能解决你的问题 =) 这是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”元素单击事件上，所有手风琴都将返回其初始状态，关闭并在右侧带有加号。手风琴的详细信息部分仅在手风琴关闭时才会出现，以防止在打开时单击它时隐藏和出现。如果手风琴关闭，将出现详细信息部分，加号将变为减号。

【讨论】：

请解释你做了什么，以便我们其他人可以理解:-)
效果很好。我什至没有考虑过使用 :visible。欣赏！

【解决方案2】：

从你的小提琴来看，我现在看不到任何东西在扩展，但有一个简单的技巧可以实现该功能：点击时隐藏所有而不是只显示那个特定的。

$(".expand").click(function(){
    $(".detail").collaps();
    $(this).parent().find(".detail").expand();
});

【讨论】：

【解决方案3】：

使用已经具有此功能的库可以为您节省大量时间、精力和维护工作。 jQuery UI 和 Kendo UI 都经过试验和测试，并已被世界各地的开发人员使用。其他人已经解决了这些问题。聪明地工作！（我都不为任何一个工作。）

https://jqueryui.com/accordion/

http://demos.telerik.com/kendo-ui/panelbar/api

【讨论】：