web-dev-qa-db-ja.com

bootstrap collapseが開いているか閉じているかを判断する方法は？

bootstrap collapseがある場合、折りたたみが開いているか閉じているかをクリックイベントからどのように判断できますか？

ここに私のクリックイベントがありますか、クリックイベントを使用するより良い方法がありますか？

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

<div>
  <a [email protected] class="register-student-link" data-toggle="collapse" href=@spaceIdWith aria-expanded="false" aria-controls="collapseExample">
                                                    Register Student
                                                </a>
</div>
javascriptjquerytwitter-bootstrapcollapse
22
user1186050

ブートストラップは、aria-expanded属性を使用して、領域が折りたたまれているかどうかをtrueまたはfalseで示します。

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

試してください：

$('#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 [email protected] 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>

（ https://stackoverflow.com/a/18147817/2033574 （Kevinに言及）および http://www.bootply.com/73101 に基づく）

21
Josiah Krutz

実際に折りたたむ前に、要素が折りたたまれているかどうかを判断する方法が必要でした。一方、イベントリスナーはその後のみトリガーします。

//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');
17
adam3039

イベントを見ることができますhidden.bs.collapse

フィドルを参照してください： http://jsfiddle.net/kyeuvx1d/

3
Kevin Friedheim
function checkStatus() {

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

checkStatus()
0
Joyal