jQuery hasClass and if statement

Question

我正在遇到问题，试图使此代码正确运行。我有一个称为.collapsible-menu的DIV元素，当它变得活跃时，我需要更改其z索引。单击菜单时，"菜单活动"将通过其他一些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