需要一个简单的可折叠 Gizmo答案

【问题标题】：Need a Simple Collapsible Gizmo需要一个简单的可折叠 Gizmo
【发布时间】：2016-08-31 21:08:46
【问题描述】：

这有点奇怪；我一直在学习 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 等的替代方案。

一个问题是我正在尝试制作一个多层次的小玩意儿。单击初始按钮或标题将显示一系列按钮，如下所示：

<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>

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

总之，我只是在寻找一个非常简单的小玩意儿，它 1) 默认隐藏内容，2) 在打开后不会关闭，直到用户再次点击它。事实上，我认为有一种方法可以使用简单的 CSS 来做到这一点，但我不记得了。

【问题讨论】：

标签： jquery css twitter-bootstrap

【解决方案1】：

如果你想远离 jquery 之外的任何东西，它本身就很容易：

<div class='collapsible'>
  <h3>I'm a header</h3>
  <p style='background:orange; display:none;'>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

那么你的 javascript 可以如下所示：

$(document).ready(function(){
    $('.collapsible h3').click(function(){
        $(this).next().slideToggle();
    })
});

这是一个你可以尝试的小提琴：https://jsfiddle.net/403f7k3e/

【讨论】：

【解决方案2】：

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

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

简短回答：尝试引导手风琴并排除 data-parent='#idofAccordion'

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

【讨论】：