如何确定引导崩溃是打开还是关闭？

Posted 2023-03-24

【中文标题】如何确定引导崩溃是打开还是关闭？

【英文标题】：How to determine if a bootstrap collapse is opening or closing?

【发布时间】：2016-01-10 14:19:36

【问题描述】：

如果我有引导折叠，我如何从点击事件中确定折叠是打开还是关闭？

这是我的点击事件，还是有更好的方法来使用点击事件？

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

<div>
  <a id=@space.EventId class="register-student-link" data-toggle="collapse" href=@spaceIdWith aria-expanded="false" aria-controls="collapseExample">
                                                    Register Student
                                                </a>
</div>

【参考方案1】：

Bootstrap 使用 aria-expanded 属性来显示区域是否折叠的真假。

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

【讨论】：

对于任何努力让它工作的人；确保在 html 中将 aria-expanded 属性初始化为 true 或 false！

这可能是真的，并且可能对您有所帮助，看到这个答案是由 OP 做出的。但是，如果我通读问题本身（我也有），这根本无法回答。下面的答案（带有showed.bs.collapse）就像一个魅力并回答了“如何确定崩溃事件”的真正问题。我认为应该将其标记为正确答案。

【参考方案2】：

试试：

$('#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>

（基于https://***.com/a/18147817/2033574（提到凯文）和http://www.bootply.com/73101）

【参考方案3】：

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

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

【参考方案4】：

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

见小提琴：http://jsfiddle.net/kyeuvx1d/

【讨论】：

bootstrap collapse 没有这个

这是另一个类似答案的帖子：***.com/questions/18147338/…

【参考方案5】：

if(!$("#id").hasClass('show'))
    alert("Uncollapsed");

else 
    alert("Collapsed");

对于引导程序 4