非常简单 Javascript 切换不工作

Question

我正在尝试使用 javascript 创建一个简单的开关 class，但我的代码存在问题。有人可以让我知道错误是什么吗？谢谢

HTML:

<div id="buttonOne">CLick Here One</div>
   <div id="carouselOne">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi incidunt minus laudantium, tempora fuga expedita odit esse fugiat, quas vel debitis, quae dolorem dolores neque labore. Cumque placeat assumenda, mollitia!</p>
</div>

CSS:

#carouselOne {
    display: none;
}

#buttonOne {
    cursor: pointer;
}

.toggleHideShow {
    display:block;
}

Javascript:

var btnOne = document.getElementById("buttonOne");

function functionOne() {
    var carOne = document.getElementById("carouselOne");
    if ( carOne.className == "" ) {
        carOne.className = "toggleHideShow";
    }else {
        carOne.className = "";
    }
}
btnOne.addEventListener("click", functionOne);

Answer 1

更改css行

.toggleHideShow {

至

#carouselOne.toggleHideShow {

这会起作用

Answer 2

试试这个：

var btnOne = document.getElementById("buttonOne");

function functionOne() {
  var carOne = document.getElementById("carouselOne");

  carOne.classList.toggle('hidden');
}

btnOne.addEventListener("click", functionOne);

.hidden {
  display: none;
}

<div id="buttonOne">CLick Here One</div>

<div id="carouselOne">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi incidunt minus laudantium, tempora fuga expedita odit esse fugiat, quas vel debitis, quae dolorem dolores neque labore. Cumque placeat assumenda, mollitia!</p>
</div>

非常简单 Javascript 切换不工作

Very Simple Javascript Toggle Not Working

javascript

toggle