Question

我有一个<div class="content toggle">我已经隐藏，直到调用某个事件，然后我添加一个类来表明它需要可见。

我目前的CSS看起来像：

.content {
  display: none;
}

.content.visible {
  display: block;
}

我添加.visible的代码如下所示：

[].forEach.call(document.getElementsByClassName('toggle'), function(x) {
  x.classList.toggle('visible');
});

但是，添加课程.visible后，<div>仍为display: none;。这里发生了什么事？我该如何解决？

Answer 1

好像你的JS选择了一个名为“toggle”而不是“content”的类：

getElementsByClassName('toggle')

Answer 2

有100种方法可以做你想要的。这是一个解决方案。

   <script>
      function makeVisible() {
         var myContentDiv = document.getElementById("mycontent");
         myContentDiv.style.display = "block";
      }
   </script>
   <div id="mycontent" class="content"></div>
   <a id="mybutton" href="javascript:makeVisible()"></a>

Answer 3

更新了答案，以反映jsfiddle。

HTML：

<div class="content">hi</div>
<button id='button'>toggle visible</button>

JS

var button = document.getElementById('button');

button.onclick = function() {
    var div = document.getElementById('content');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};

Answer 4

.content {
  display: none;
}

.visible {
  display: block;
}

Answer 5

将您的显示类与核心类分开。

在jQuery中：

$(this).toggleClass("visible hidden");

和css：

<style>
.visible {
   display: block;
}
.hidden {
   display: none;
}
</style>

如何使用切换类更改<div>的属性？

5 个答案: