jQuery hasClass和if语句

Question

I'm having issues trying to get this code to run properly. I have a div element called .collapsible-menu and I need to change its z-index when it becomes active. When the menu is clicked the class, 'menu-active' is added to the body through some other js.

This is what I have:

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

Does this require me to use a mutation observation due to the class being added in after the documents been loaded? If so, is this on the right path?

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

You should use CSS.

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

If you can do something using the CSS , it is almost always better solution than using JavaScript