jQuery hasClass и если оператор

Question

У меня возникли проблемы с попыткой запустить этот код. У меня есть элемент div, называемый .collapsible-menu, и мне нужно изменить его z-индекс, когда он станет активным. При щелчке по меню класс, «menu-active» добавляется в тело через некоторые другие js.

Это то, что у меня есть:

jQuery(document).ready(function($){ 
    if ($("body").hasClass('menu-active')) { 
    $(".collapsible-menu").css("zIndex", 100); 
    } else { 
    $(".collapsible-menu").css("zIndex", 3); 
    } 
}); 

это требует ли мне использовать наблюдение мутации из-за класса добавляемого после документов были загружены? Если да, то это на правильном пути?

var observer = new MutationObserver(function(mutations) { 
     mutations.forEach(function(mutation) { 
     if ($("body").hasClass('menu-active')) { 
      $(".collapsible-menu").css("zIndex", 100); 
     } else { 
      $(".collapsible-menu").css("zIndex", 3); 
     } 
     console.log(mutation.type); 
    });  
}); 

Answer 1

Вы должны использовать CSS.

.collapsible-menu{ 
    z-index: 3; 
} 
.menu-active .collapsible-menu{ 
    z-index: 100; 
} 

Если вы можете сделать что-то в CSS, это почти всегда будет лучшее решение, чем при использовании JavaScript