Bootstrap手风琴的手动切换“锁定”它答案

【问题标题】：Manual toggle of Bootstrap accordion "locks" itBootstrap手风琴的手动切换“锁定”它
【发布时间】：2014-12-04 01:20:44
【问题描述】：

我正在处理一个以 Bootstrap 手风琴为特色的页面。它工作正常，但我被要求实现一个功能，当从其他各种页面链接时，特定的可折叠元素是“打开的” - 所以“www.whatever.tld#e2”会带你到已经打开的第二个元素。让事情像这样表现没有问题，StackOverflow 和其他地方的各种其他页面都充分涵盖了它。我尝试的实现如下：

$(window.location.hash + '.collapse').collapse('toggle');

这可以根据需要发挥作用，它会打开手风琴的正确部分。但是，在导航到这样的页面后，它会以这种形式“锁定”页面 - 它不再响应对手风琴元素的任何点击，并且您无法关闭打开的元素或打开其他元素。似乎没有其他人遇到过这个问题，或者没有提到过这个问题，例如这里：

Bootstrap Collapse - open the given id fragment

bootstrap-collapse.js hide and show events

我已尝试对此代码进行变体，例如

var anchor = window.location.hash;
$(".collapse").collapse('hide');
$(anchor).collapse('show');

这出乎意料 - 所有元素都被强制打开，并且无法关闭。删除第二行修复了这个问题，但在其他方面就像我指定的原始代码一样 - 它打开了目标元素，但冻结了手风琴。

以下是我正在使用的手风琴结构的摘录。除非我无法避免，否则我宁愿不必修改它，因为我试图坚持组织风格指南，而这个手风琴代码是人们在我们的 CMS 上使用的标准手风琴：

<div id="accordion-asset-listing" class="accordion" id="accordion" role="tabpanel">
    <section class="accordion-group" role="tab" aria-selected="false">
       <header class="accordion-heading">
           <h3><a aria-controls="pharmacy" href="#pharmacy" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-asset-listing">Pharmacy</a></h3>
       </header>

       <div id="pharmacy" class="accordion-body collapse" aria-hidden="true" role="tabpanel">
          <div class="accordion-inner">
             <p><!-- content here --></p>
          </div>
       </div>
    </section>

我对 JS 或它的使用并不感到惊讶，因此任何人必须让我走上正轨的指针将不胜感激。

【问题讨论】：

IIRC，hide/show 方法是异步的，因此在 hide 之后立即执行 show 而不使用事件处理程序将不起作用。在调用show 之前，您应该等待hidden.bs.collapse 事件触发。
我应该包含它，但该代码是在标准的“等待加载”Jquery 代码中执行的。所以理论上它应该只在页面完成后执行。在这种情况下这是否不够？

标签： javascript jquery twitter-bootstrap accordion

【解决方案1】：

虽然我仍然不明白为什么它最初坏了，但最后还是把它整理好了。在跳转到站点调用的 .js 文件后，我最终手动重建了我想要的一对并在代码中调用它们。这不是一个好的解决方案，但至少它已经奏效了。

由于该网站（一个在 Squiz Matrix CMS 上管理的大学网站）使用某种“定制版本”的 Bootstrap、Jquery 等似乎去除了这些东西的一些元素，因此可能引入了一些错误具体到我们这些东西的版本。

【讨论】：