html二级菜单关闭按钮代码

HTML二级菜单关闭按钮是指在网页中的菜单栏中，点击一个按钮后关闭下拉菜单的功能。下面是一个HTML二级菜单关闭按钮的代码：

html>
    head>
    style>
.dropdown {
      position: relative;
      display: inline-block;
}
.dropdown-content {
      display: none;
      position: absolute;
      z-index: 1;
}
.dropdown:hover .dropdown-content {
      display: block;
}
.close-button {
      display: none;
      float: right;
}
.dropdown:hover .close-button {
      display: block;
}
    /style>
    /head>
    body>
    div class="dropdown">
      a href="#">
    下拉菜单/a>
      div class="dropdown-content">
        a href="#">
    菜单项 1/a>
        a href="#">
    菜单项 2/a>
        span class="close-button">
    关闭/span>
      /div>
    /div>
    script>
      var closeButtons = document.querySelectorAll('.close-button');
      for (var i = 0;
     i  closeButtons.length;
 i++) {
    closeButtons[i].addEventListener('click', function() {
          this.parentElement.style.display = 'none';
    }
    );
  }
    /script>
    /body>
    /html>
    

上面的代码中，使用display: none属性来隐藏菜单的下拉项，当鼠标悬停在菜单上时，通过设置:hover属性来显示下拉项。同时，在下拉菜单中添加了一个关闭按钮，当用户点击该按钮时，通过JavaScript获取该按钮的父元素来关闭下拉菜单。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！