javascript - 识别侧边栏何时处于事件状态

Question

我想使用 javaScript 来识别边栏何时被归类为“事件”。我正在使用 Bootstrap 的侧边栏切换按钮，单击该按钮时，会将一类“事件”分配给侧边栏。

<button type="button" id="sidebarCollapse" class="btn btn-info" style="font-family:'Poppins'; position:absolute; z-index:9; margin-left:7vh; margin-top:2vh;font-size: 1.5em">
                    <span class="glyphicon glyphicon-filter"></span> Filter
                </button>

CSS:

    #sidebar {
    background: #202020;
    color: #fff;
    display:inline-block;   
    }

    #sidebar.active {
    margin-left: -250px;
    } 

还有，JS:

//Check to see whether sidebar has class 'active'
var sideBar = document.getElementById('sidebar')
        console.log(sideBar.className)
        if (sideBar.className == ('active')){
                console.log('active')
            }
        else (console.log('not active'))

需要明确的是，仅在单击 sidebarCollapse 按钮​​时才分配事件类，再次单击该按钮时会移除事件类。上面的代码不起作用。它只记录“不活动”，即使侧边栏明确归类为“事件”并且可见。我希望它动态读取侧边栏的状态(分类为事件或非事件)。

var sideBar = document.getElementById('sidebar');
console.log(sideBar.className)
if (sideBar.classList.contains('active')){
    console.log('active')
}
else (console.log('not active'))

这是 HTML 的图片，显示了边栏的两种状态(事件/不活动):

Answer 1

您的代码应该可以工作。您的代码总是显示“未激活”的原因有 2 个

1. 您的代码在页面加载时执行
2. 您在侧边栏打开之前获取侧边栏 div，之后不会更新 dom 对象。

将您的代码移动到一个函数中，并在您需要检查时调用该函数。

示例代码如下。

function isSidebarOpen() {

  var sideBar = document.getElementById('sidebar');

  //console.log(sideBar.classList)
  if (sideBar.classList.contains('active')) {
    console.log('active')
  } else(console.log('not active'))

}

<div id="sidebar" class="active">
  test
  <button onclick='isSidebarOpen()'>
Check</button>

</div>