MVC Bootstrap 手风琴 - 使用 JavaScript 确定是打开还是关闭答案

【问题标题】：MVC Bootstrap accordion - determine with JavaScript if open or closedMVC Bootstrap 手风琴 - 使用 JavaScript 确定是打开还是关闭
【发布时间】：2015-07-28 22:33:13
【问题描述】：

如果我们有一个最初这样定义的可折叠面板

 <div id="ContactDetails" class="panel-collapse collapse">

如何通过 JavaScript 测试它是打开还是关闭？

谢谢

【问题讨论】：

听起来你需要问问自己，当展开和折叠时，css 属性或 css 类的区别是什么。然后，您可以使用 JavaScript 轻松检查该条件。检查浏览器中的元素并找出答案。

标签： javascript jquery model-view-controller

【解决方案1】：

您可以在该元素中获取类列表（在您的情况下为 div id = "ContactDetails"）。

var classList = document.getElementById('ContactDetails').className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
   if (classList[i] === 'collapse') {
     //do something
   }
}

然后，如果其中一个等于“collapse”，您可以浏览您的 classList[]。

纯Javascript方式：

var classList =$('#ContactDetails').attr('class').split(/\s+/);
$.each( classList, function(index, item){
    if (item === 'collapse') {
       //do something
    }
});

【讨论】：

由于某种原因，我无法让第二个脚本工作，但第一个脚本已经完成了工作。感谢您的快速响应:-)

【解决方案2】：

与JQuery.hasClass:

$( "#ContactDetails" ).hasClass( "panel-collapse" )

【讨论】：

我尝试的第一件事是在 JavaScript 中查找 .className，无论手风琴是打开还是关闭，它都会返回正值

【解决方案3】：

@Jocksan 很接近，除了面板将始终具有“panel-collapse”类（如@gchq 发现的那样）。打开时添加“in”类，关闭时删除“in”类。所以这将返回 true 为打开，false 为关闭：

$( "#ContactDetails" ).hasClass( "in" )

这里有更多关于这些类以及它是如何工作的：http://getbootstrap.com/javascript/#collapse-example-accordion

【讨论】：