Javascript 打开侧面菜单时更改主体的alpha值

我已经使用rgba值为css中的body标记设置了背景色。如果侧菜单打开，我想更改alpha值，如果侧菜单关闭，则将其还原

我已经使用下面链接中给出的源代码创建了侧菜单。

在CSS中：

body {
  background: rgba(1,1,1,0);
}

我使用了gn类菜单作为侧菜单，并更改了中的alpha值

body.gn-menu gn-open-all {
   background: rgba(1,1,1,0.8);
}

还尝试了不透明度

body.gn-menu gn-open-all {
   -webkit-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
    opacity: 0.8;
}

如果我在类gn菜单gn open all中给出了这个选项，那么菜单中的项目的背景颜色将改变

但是alpha值没有改变

如何更改alpha值

---

谢谢。

您可以在侧菜单打开时将css类添加到身体容器中，然后在侧菜单关闭时将其删除。通过捕获css类，您可以更改容器的alpha。

您可以在侧菜单打开时将css类添加到主体容器中，然后在侧菜单关闭时将其删除。通过捕获该css类，您可以更改容器的alpha。

如果您的目的是更改整个标记的不透明度，那么您的css规则是错误的

解决方案：

body {
  background: rgba(1,1,1,0);
}

body.opened-menu {
  background: rgba(1,1,1,0.8);
}

然后修改_openMenu/_closeMenu函数，将

打开的菜单

类添加到正文中。您可以使用jQuery或普通javascript

_openMenu : function() {
    if( this.isMenuOpen ) return;
    classie.add( this.trigger, 'gn-selected' );
    this.isMenuOpen = true;
    classie.add( this.menu, 'gn-open-all' );
    //add class to body
    document.getElementsByTagName("body")[0].classList.add("opened-menu")
    this._closeIconMenu();
},
_closeMenu : function() {
    if( !this.isMenuOpen ) return;
    classie.remove( this.trigger, 'gn-selected' );
    this.isMenuOpen = false;
    classie.remove( this.menu, 'gn-open-all' );
    //remove class to body
    document.getElementsByTagName("body")[0].classList.remove("opened-menu")
    this._closeIconMenu();
}

---

如果您的目的是更改整个标记的不透明度，那么您的css规则是错误的

解决方案：

body {
  background: rgba(1,1,1,0);
}

body.opened-menu {
  background: rgba(1,1,1,0.8);
}

然后修改_openMenu/_closeMenu函数，将

打开的菜单

类添加到正文中。您可以使用jQuery或普通javascript

_openMenu : function() {
    if( this.isMenuOpen ) return;
    classie.add( this.trigger, 'gn-selected' );
    this.isMenuOpen = true;
    classie.add( this.menu, 'gn-open-all' );
    //add class to body
    document.getElementsByTagName("body")[0].classList.add("opened-menu")
    this._closeIconMenu();
},
_closeMenu : function() {
    if( !this.isMenuOpen ) return;
    classie.remove( this.trigger, 'gn-selected' );
    this.isMenuOpen = false;
    classie.remove( this.menu, 'gn-open-all' );
    //remove class to body
    document.getElementsByTagName("body")[0].classList.remove("opened-menu")
    this._closeIconMenu();
}

---

Simone

您应该提供一些代码！如果你能展示你的代码。“这很容易得到帮助。”TeutaKoraqi编辑了这个问题。请查收it@Newbie7988，你能告诉我如何打开和关闭这副菜单吗？向我提供JQuery代码！你应该提供一些代码！如果你能展示你的代码。“这很容易得到帮助。”TeutaKoraqi编辑了这个问题。请查收it@Newbie7988，你能告诉我如何打开和关闭这副菜单吗？向我提供JQuery代码！