Question

我在尝试使此代码正常运行时遇到问题。我有一个名为.collapsible-menu的div元素，我需要在它变为活动状态时更改其z-index。单击菜单时，“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

jQuery hasClass和if语句

1 个答案: