jquery - 需要一个简单的可折叠小发明

Question

这有点奇怪；我一直在学习 jQuery 和 Bootstrap，它们都有很多很酷的工具，但我对书中最简单的技巧之一感到困惑:一个简单的可折叠元素。

我找到了完美的候选人 here :

<div data-role="collapsible">
  <h3>I'm a header</h3>
  <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

唯一的问题是它是 jQuery MOBILE，我不确定用更多的 JavaScript 和 JS 来膨胀我的代码是否是个好主意。因此，在我实现 jQuery Mobile 之前，我想问问是否有人可以推荐一种适用于 jQuery、Bootstrap 等的替代方案。

一个问题是我正在尝试制作一个多层次的 Gizmo。单击初始按钮或标题将显示一系列如下按钮:

<button id="na" class="btn btn-na"><b>North America</b></button>
<div id="div-na"></div>
<button id="sa" class="btn btn-sa"><b>South America</b></button>
<div id="div-sa"></div>

点击北美等将调用 AJAX 以显示国家列表。我遇到的一个问题是，当我单击北美按钮时，嵌套在其中的“我是标题”关闭。

另一种可能性是对我的主要内容中的标题进行逆向工程，这些标题可以手动打开或关闭...

<ul class="ulMain">
  <li data-toggle="collapse" data-target="#d1"><a href="#introduction" title="Introduction" class="NavLink">&#8226; D1 <small><span class="only-collapsed glyphicon glyphicon-chevron-down"></span><span class="only-expanded glyphicon glyphicon-remove-sign"></span></small></a></li>

  <div id="d1">D1</div>
</ul>

但我还没有想出如何将默认设置从展开更改为折叠。

总而言之，我只是在寻找一个非常简单的 gizmo，它 1) 默认情况下隐藏内容，并且 2) 打开后直到用户再次单击它才关闭。事实上，我认为有一种方法可以用简单的 CSS 来做到这一点，但我不记得了。

Answer 1

Bootstrap collapse/accordion 可以默认隐藏内容，只需在示例中省略第一个面板中的 in 类: http://getbootstrap.com/javascript/#collapse-example-accordion

至于在不添加 js 的情况下保持面板打开直到再次选择其标题，这里有一个很好的答案: https://stackoverflow.com/a/11658976/2460535

简短回答:尝试自举 Accordion 并排除 data-parent='#idofAccordion'

https://jsfiddle.net/curtisweeks/jujL376j/