Bootstrap collapsible panels：如何设置元素点击只折叠而不再次压缩

Question

我有一个可折叠面板，我正在使用 data-toggle="collapse" 和 href="#collapseDiv" 折叠它。我希望能够单击我的元素并将其设置为仅折叠 collapseDiv 而不是在单击后再次隐藏它（不太确定 "uncollapsed" 术语是什么）。

基本上我希望 datatoggle 是一个只开放的事件。

这是否可以在 html 中执行，或者我必须使用 JQuery 方法（如果可以，easiest/simplest 执行 JQuery 方法的方法是什么)?

注意：首选html方法

Answer 1

DEMO

截至目前 collapsible panel 没有任何此类功能，但您可以编写一个简短的 jquery hack 来防止它发生，如下所示：

为目标 collapsible panel 的元素指定一个 click event。这里我假设它是 button 如果你给所有 button 和 bind click event 一个共同的 class 就更好了 class

$('button').on('click',function(e){
    var target=$(this).attr('href');//get the clicked button's href value
    if($(target).hasClass('in')) 
    {
        //check that target element has in class which gets added as a functionality of 
        //collapsible panel and if yes stop the events propogation
        e.stopImmediatePropagation();
    }
});

Answer 2

Bootstrap 有它自己的事件，当某些事情发生时会调用这些事件。折叠内容时会触发 shown.bs.collapse 事件。使用它来删除使折叠的按钮/锚点上的属性。

$("#collapseExample").on("shown.bs.collapse",function(){    
    //when the content is collapsed, we change the `href` attribute of the anchor
    $("#thebutton").attr("href","#").html("Collapse no more");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample" id="thebutton">
  Click to collapse
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras volutpat molestie risus, quis auctor ligula pulvinar ac. Quisque quis pretium enim. Vivamus eget urna in mi vestibulum ornare. Aenean et arcu et neque ullamcorper egestas id pellentesque libero. Aliquam eget malesuada arcu. Vestibulum nec dolor nec ex maximus eleifend. Vestibulum nec aliquet nibh, eu vehicula ex. Praesent vitae quam augue. Ut suscipit faucibus dui ac laoreet. Maecenas a mattis diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam imperdiet nec magna nec ultricies. In ornare risus sit amet luctus pharetra. Integer pharetra nunc justo, vitae posuere lorem placerat bibendum. Integer tincidunt maximus augue, id malesuada quam pretium et. 
  </div>
</div>

Bootstrap collapsible panels：如何设置元素点击只折叠而不再次压缩

Bootstrap collapsible panels: How to set element click to only collapse and not compact again

html

jquery

collapse

twitter-bootstrap