jquery - Toggle 类触发但没有发生任何更改

Question

我知道这个主题有多个线程，但没有一个线程可以解决我的问题。

我正在尝试实现一个toggleClass功能 - 当单击 Logo 时，页面会变暗并显示一些文本。再次点击该标志，页面恢复原来的风格。

我可以在开发者控制台中看到事件触发，但没有发生任何更改。我尝试过使用 addClass 和 removeClass 来代替切换，并且尝试过弄乱可见元素的 z 索引，但没有成功。

如有任何帮助，我们将不胜感激。

这是该网站的链接。 Logo 位于左上角。

Inline Link

<a class="nav-link"><%= image_tag "jclogo.png", alt: "logo", class: "jclogo", id: "jclogo"%></a>

<div id="logo-bg" class="logo-bg">yo.</div>

.jclogo {
  float: left;
  padding-top: 5px;
  padding-left: 3px;
  padding-bottom: 5px;
  padding-right: 5px;
  margin-left: 35px;
  margin-top: 20px;
  height: 35px;
  width: 40px;
  cursor: pointer;
  transition: all ease-in-out 250ms;
}

.logo-bg {
  background-color: black;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.logo-bg .visible {
  opacity: 1;
  visibility: visible;
  z-index: 9000;
}

  $(document).ready(function() {
    var button = document.getElementById("jclogo");

    function cover() {
      $(".logo-bg").toggleClass("visible");
    }
    button.addEventListener("click", cover);
  });

Answer 1

您要在 .logo-bg 上切换类，因此您需要将类名称链接起来，类名称之间不能有空格。

更改此:

.logo-bg .visible {
  …
}

进入此:

.logo-bg.visible {
  …
}

演示

$(document).ready(function() {
  var button = document.getElementById("jclogo");

  function cover() {
    $(".logo-bg").toggleClass("visible");
  }
  button.addEventListener("click", cover);
});

.logo-bg {
  background-color: black;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.logo-bg.visible {
  opacity: 1;
  visibility: visible;
  z-index: 9000;
}

body {
  margin-top: 2em;
}

#jclogo {
  position: absolute;
  top: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="jclogo">button</button>
<div class="logo-bg"></div>

jsFiddle