css和js实现动态下拉菜单

CSS和JS是现在Web前端开发不可或缺的两大技术，它们可以实现各种各样的效果，其中之一就是动态下拉菜单。下面让我们具体了解一下如何通过CSS和JS实现动态下拉菜单吧。

/* CSS代码 */.dropdown {
      position: relative;
}
.dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1;
}
.dropdown:hover .dropdown-menu {
      display: block;
}

CSS部分主要是定义了下拉菜单的样式，使用了position属性实现绝对定位，以及:hover伪类实现鼠标悬停显示下拉菜单。

// JS代码window.addEventListener('click', function(e) {
      var dropdownMenu = document.querySelector('.dropdown-menu');
      if (dropdownMenu &
    &
 !dropdownMenu.contains(e.target)) {
        dropdownMenu.style.display = 'none';
  }
}
    );
    var dropdownToggle = document.querySelector('.dropdown-toggle');
if (dropdownToggle) {
  dropdownToggle.addEventListener('click', function(e) {
        var dropdownMenu = document.querySelector('.dropdown-menu');
    if (dropdownMenu) {
      if (dropdownMenu.style.display === 'none') {
            dropdownMenu.style.display = 'block';
      }
 else {
            dropdownMenu.style.display = 'none';
      }
    }
  }
    );
}
    

JS部分主要是实现点击菜单按钮，下拉菜单的显示和隐藏。addEventListener函数绑定了点击事件，并且使用了contains方法判断点击的区域是否在下拉菜单内部。

通过CSS和JS的配合，我们可以轻松地实现动态下拉菜单效果，让页面变得更加优美和高效。

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