js实现点击向下展开的下拉菜单效果代码

实现点击向下展开的下拉菜单效果可以使用HTML和JavaScript来完成，下面是详细步骤：

HTML

首先，在HTML中需要创建一个下拉菜单的结构，包含一个触发下拉菜单的按钮和一个下拉菜单框，如下所示：

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">菜单项一</a>
    <a href="#">菜单项二</a>
    <a href="#">菜单项三</a>
  </div>
</div>

其中，类名为dropdown的div作为下拉菜单的容器，类名为dropbtn的button作为触发下拉菜单的按钮，类名为dropdown-content的div作为下拉菜单框，里面包含多个菜单项。需要注意的是，dropdown-content的初始状态下应该是隐藏的。

CSS

然后，需要使用CSS设置下拉菜单的样式，包括下拉菜单按钮的样式和下拉菜单框的样式。其中，下拉菜单框的初始状态下应该是隐藏的，可以使用display:none来实现。当点击下拉菜单按钮时，下拉菜单框应该显示出来，可以使用display:block来实现。

.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.show {
  display:block;
}

需要注意的是，使用JavaScript实现下拉菜单的展开和收缩时，需要为下拉菜单框添加类名show。

JavaScript

最后，在JavaScript中需要为下拉菜单按钮添加一个点击事件，当点击按钮时展开或收缩下拉菜单。可以使用addEventListener方法来绑定点击事件，并结合classList属性中的add和remove方法来切换下拉菜单的展开状态。

var btn = document.querySelector(".dropbtn");
var dropdownContent = document.querySelector(".dropdown-content");

btn.addEventListener("click", function() {
  dropdownContent.classList.toggle("show");
});

以下是两个示例，如下：

示例1

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">菜单项一</a>
    <a href="#">菜单项二</a>
    <a href="#">菜单项三</a>
  </div>
</div>

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.show {
  display:block;
}
</style>

<script>
var btn = document.querySelector(".dropbtn");
var dropdownContent = document.querySelector(".dropdown-content");

btn.addEventListener("click", function() {
  dropdownContent.classList.toggle("show");
});
</script>

示例2

<div class="dropdown">
  <button class="dropbtn">下拉菜单2</button>
  <div class="dropdown-content">
    <a href="#">菜单项一2</a>
    <a href="#">菜单项二2</a>
    <a href="#">菜单项三2</a>
  </div>
</div>

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: blueviolet;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.show {
  display:block;
}
</style>

<script>
var btn2 = document.querySelector(".dropbtn");
var dropdownContent2 = document.querySelector(".dropdown-content");

btn2.addEventListener("click", function() {
  dropdownContent2.classList.toggle("show");
});
</script>

以上就是实现点击向下展开的下拉菜单效果的完整攻略。