jQuery hasClass 和 if 语句

Question

我在尝试将此代码正确地运行时遇到问题。我有一个名为 .collapsible-menu 的 div 元素，我需要在它激活时更改它的 z-index。单击菜单时，class、'menu-active' 会通过其他一些 js 添加到正文中。

这是我的：

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

由于在加载文档后添加了 class，这是否需要我使用突变观察？如果是这样，这是在正确的道路上吗？

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

jQuery hasClass 和 if 语句

jQuery hasClass and if statement

javascript

jquery

drupal

mutation-observers