jQuery的hasClass和if语句

Question

我有问题，试图让这个代码正常运行。我有一个div元素称为.collapsible菜单，我需要当它变为有效改变的Z-index。当菜单被点击的类“菜单活性”通过一些其他的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更好的解决方案