Question

我正在寻找一个解决方案来告诉data-toggle="collapse"链接只能打开。因此，如果框已经打开（未折叠），则无需执行任何操作。我想知道这个选项是否考虑用于自举（2.x）手风琴，例如将uncollapse或open代替collapse。我试着猜测，但没有运气。

感谢您提供任何帮助或提示！我主要寻找一种没有任何额外JavaScript的解决方案。

编辑：我必须进一步解释，我想要实现的是我可以添加一个仅打开的链接（按钮），另一个只能关闭手风琴的链接。很抱歉没有具体说明

Answer 1

Bootstrap 3的折叠组件公开了一些事件，请参阅http://getbootstrap.com/javascript/#collapse-events。如果正在折叠某个部分，则会触发hide.bs.collapse事件。您可以收听此活动，只需return false即可停止崩溃。

Bootstrap 2的崩溃组件似乎将这些事件暴露在非命名空间＆＃34;方式，见http://getbootstrap.com/2.3.2/javascript.html#collapse。您似乎可以听取hide事件来实现这一目标，但我还没有对其进行测试。

请参阅Bootstrap 3的示例：

＆＃13;

$('#collapseOne').on('hide.bs.collapse', function() {
  return false;
});

＆＃13;

#accordion {
  margin: 20px;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我认为您可以尝试使用文档来使用shown事件。

“当崩溃元素可见时，会触发此事件用户（将等待css转换完成）。“

基本上你应该像这里一样

$('#collapseBody').on('hidden', function () {
    var $toggle = $this.parents('.accordion-group').find('.accordion-toggle');

    $toggle.on('click', function(){
        return false;
    });
})

其中#collapseBody是带有示例崩溃内容的div的ID

Bootstrap手风琴“数据切换”链接强制打开（不要关闭！）

2 个答案: