Question

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

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

这可以在html中执行，还是必须使用JQuery方法（如果是，那么最简单/最简单的方法是使用JQuery方法）？

注意：首选html方法

Answer 1

<强> DEMO

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

为您定位click event的元素分配collapsible panel。我假设它为button，如果您针对class button和bind click event提供共同的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可折叠面板：如何将元素单击设置为仅折叠而不是再次压缩

2 个答案: