下拉脚本块

Dropdown javascript block

本文关键字：脚本      更新时间：2023-09-26

我在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中保存框（显示或隐藏）的"状态"？所以用户可以离开它，关闭页面，并在下次访问时保持他离开它？

您有两个错别字。

div 的 id 应该cookiemenu_dropdown在div 上，但它当前是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>

将 CSS 规则更改为 

div.cookiemenu_content.ShowCookieBox {
    display: block;
    border:2px solid red;
}
div.cookiemenu_content {
    display: none;
}

应用 ShowCookieBox 类时，来自 .ShowCookieBox 的display: block被div.cookiemenu_content规则中的display: none覆盖。

检查 jsfiddle

相关文章：