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>

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

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

Answer 1

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/

Answer 2

如果您想要远离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/

需要一个简单的可折叠Gizmo

2 个答案: