Распознавание, когда боковая панель активна или нет - PullRequest
Новая
       22

Распознавание, когда боковая панель активна или нет

1 голос
/ 09 ноября 2019

Я хочу использовать javaScript для распознавания, когда боковая панель классифицируется как «активная» или нет. Я использую кнопку переключения боковой панели начальной загрузки, которая при нажатии назначает класс «активный» боковой панели. 

<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, показывающие два состояния боковой панели (активная / не активная):

enter image description here

enter image description here

Ответы [ 2 ]

1 голос
/ 10 ноября 2019

Ваш код должен работать. Есть 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>
1 голос
/ 10 ноября 2019

Используйте MutationObserver .

Добавьте код ниже, чтобы наблюдать за изменением: 

const targetNode = document.getElementById('sidebarCollapse'); //listen to the sidebar

const config = { attributes: true }; //listen for changes in attributes

const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'attributes') {
          if (targetNode.classList.contains('active')){
            console.log('active');
            }
        }
    }
};

const observer = new MutationObserver(callback); //construct observer

observer.observe(targetNode, config); //start observing

Рабочая ручка здесь .

...