Question

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

我正在尝试实现toggleClass功能-单击徽标时，页面变黑并显示一些文本。再次单击徽标，页面将恢复为原始样式。

我可以在开发人员控制台中看到事件触发，但是没有进行任何更改。我试过使用addClass和removeClass代替切换，并且尝试弄乱了可见元素的z索引，没有运气。

任何帮助将不胜感激。

这是该网站的链接。徽标在左上角。

<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

切换班级射击但未进行任何更改

1 个答案:

演示