javascript - 下拉 javascript block

Question

我在使用 javascript 下拉菜单时遇到问题。我需要在点击框的标题后显示一些内容。

HTML

<div id='cookiemenu'>
                <div class='cookiemenu_header' onclick='ShowCookieBox()'>
                    Test
                </div>
                <div id="cookiemenu_dropwdown" class='cookiemenu_content'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis magna sed scelerisque hendrerit.
                </div>
</div>

CSS

  #cookiemenu {
  width:100%;
  overflow: hidden;
  display:block;

}
#cookiemenu div.cookiemenu_header {
  width:100%;
  display:block;
  margin-top: 0px;
  background-color: #0B3954;
  color:#FFFFFF;
  text-align: center;
  height: 25px;
  font-size: 20px;
  line-height: 25px;
}
#cookiemenu div.cookiemenu_header:hover, div.cookiemenu_header:target {
  cursor: hand;
  text-decoration: underline;
}
div.cookiemenu_content {
}
.ShowCookieBox {
  display:block;
  border:2px solid #red;
}

JS

<script>
 function ShowCookieBox() {
    document.getElementById("cookiemenu_dropdown").classList.toggle("ShowCookieBox");
 }
</script>

它根本不起作用。谁能告诉我为什么？

第二个问题。是否有机会更改 JS，以便它可以在 cookie 中保存框的“状态”(显示或隐藏)？所以用户可以离开它，关闭页面并在下次访问时保持他离开时的样子？

Answer 1

你有两个错别字。

div的id在div上应该是cookiemenu_dropdown，但是目前是cookiemenu_dropwdown。

此外，颜色只是 red 而不是 #red。

function ShowCookieBox() {
 document.getElementById("cookiemenu_dropdown").classList.toggle("ShowCookieBox");
}

 #cookiemenu {
  width:100%;
  overflow: hidden;
  display:block;

}
#cookiemenu div.cookiemenu_header {
  width:100%;
  display:block;
  margin-top: 0px;
  background-color: #0B3954;
  color:#FFFFFF;
  text-align: center;
  height: 25px;
  font-size: 20px;
  line-height: 25px;
}
#cookiemenu div.cookiemenu_header:hover, div.cookiemenu_header:target {
  cursor: hand;
  text-decoration: underline;
}
div.cookiemenu_content {
}
.ShowCookieBox {
  display:block;
  border:2px solid red;
}

<div id='cookiemenu'>
  <div class='cookiemenu_header' onclick='ShowCookieBox()'>
    Test
  </div>
  <div id="cookiemenu_dropdown" class='cookiemenu_content'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis magna sed scelerisque hendrerit.
  </div>
</div>