Bootstrap - 如何使列表元素之一始终折叠答案

【问题标题】：Bootstrap - how to make one of list elements always collapsedBootstrap - 如何使列表元素之一始终折叠
【发布时间】：2017-08-07 21:44:17
【问题描述】：

我想使用 Bootstrap 创建一个列表，其中最后一次单击的列表项始终处于折叠状态。按照https://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
</div>

如果单击可折叠组 1，则不会折叠任何列表项。我想如果一个项目被点击，它不能被取消折叠。 An item should be uncollapsed only if another list item is selected.我怎样才能使最后点击的项目总是折叠，所以如果再次点击它不会取消折叠？

【问题讨论】：

批准编辑以将代码转换为 sn-p 或添加小提琴。
这里使用 plgin 的最简单方法：jqueryui.com/accordion
item的行为是依赖Bootstrap来定义的。如果您需要它来做一些不同的事情，您需要创建自己的 javascript 来将其折叠或不折叠。
@techhunter 我正在使用 Bootstrap，而不是 jQuery，我从您提供的链接中复制并粘贴它但无法正常工作
您已经包含了 jQuery 文件，因此您正在使用 jQuery。

标签： html css twitter-bootstrap

【解决方案1】：

这是一个 jquery 解决您的问题。从问题上的 cmets 来看，听起来 jquery 可以使用吗？（否则，请指定语言）

我正在使用event.stopPropagation(); 来防止事件冒泡到默认的引导事件侦听器。

$(document).ready(() => {
  $("[data-toggle='collapse']").click(function(event) {
    var index = $(this).index("[data-toggle='collapse']");
    if ($(".panel-collapse:eq(" + index + ")").is(":visible")) event.stopPropagation()
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
</div>

【讨论】：

我是 Web 开发的初学者，刚开始使用 Angular 2 和 Bootstrap，不确定这是否是一个问题，但在我的项目中使用了您的代码（在 index.html 文件中）并且它不起作用，不明白为什么
@user1680859 好吧，如果您使用的是 angular2，那么您将代码放在哪里，在 .js 或 .ts 文件中？它只是不起作用，还是会引发错误？
代码在 .ts 中，但我把你的代码放在 index.html 文件中，在部分，在脚本标签内，也许这就是问题所在？
您可以尝试将其包装在 document.ready 函数中（我编辑了问题）...但是，当我有时间时，我将为您创建一个打字稿示例，这会好得多.
这很好，谢谢@Zze

【解决方案2】：

请检查 Angularjs Accordion。以下链接可能对您有所帮助

http://getbootstrap.com/javascript/#collapse-example-accordion

【讨论】：

和我的例子一样，点击它会崩溃，如果你再次点击它会展开