如何确定引导程序崩溃是打开还是关闭?

时间:2015-10-13 00:42:32

标签: javascript jquery twitter-bootstrap collapse

如果我有自举崩溃,我怎么能从点击事件中确定崩溃是打开还是关闭?

这是我的点击事件,或者可能有更好的方法来使用点击事件?

##    u v w x y z formal
## 1: 1 3 0 3 6 1      4
## 2: 2 4 1 4 7 2      7
## 3: 3 5 2 5 8 3     10

$(document).on("click", "a.register-student-link", function() {
    // do some stuff to check if opening or closing
}

6 个答案:

答案 0 :(得分:26)

如果区域已折叠,

Bootstrap使用aria-expanded属性显示true或false。

var isExpanded = $(collapsableRegion).attr("aria-expanded");

答案 1 :(得分:18)

尝试:



$('#collapseDiv').on('shown.bs.collapse', function () {
   console.log("Opened")
});

$('#collapseDiv').on('hidden.bs.collapse', function () {
   console.log("Closed")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <a id=@space.EventId class="register-student-link" data-toggle="collapse" href="#collapseDiv" aria-expanded="false" aria-controls="collapseExample">Register Student</a>
</div>

<div class="collapse" id="collapseDiv">This is the collapsible content!</div>
&#13;
&#13;
&#13;

(基于https://stackoverflow.com/a/18147817/2033574(Kevin提及)和http://www.bootply.com/73101

答案 2 :(得分:16)

我需要一种方法来确定在实际折叠之前元素是否已折叠。而事件监听器仅在事后触发。

//Will return true if uncollapsed
$('#collapseDiv').hasClass('in');

//Will return true if in the process of collapsing
$('#collapseDiv').hasClass('collapsing');

//Will return true if collapsed
$('#collapseDiv').hasClass('collapse');

答案 3 :(得分:2)

您可以观看活动hidden.bs.collapse

请参阅小提琴:http://jsfiddle.net/kyeuvx1d/

答案 4 :(得分:0)

function checkStatus() {

    if($('#item1').hasClass('in')) {
        alert('closing')    
    } else {
        alert('opening')    
    }   
}

checkStatus()

答案 5 :(得分:-1)

if(!$("#id").hasClass('show')){
    alert("Uncollapsed");
}
else {
    alert("Collapsed");
}

对于Bootstrap 4