使用原生Javascript完成新闻中心下拉菜单

如何使用原生Javascript实现新闻中心下拉菜单，新闻中心下拉菜单项有行业新闻、公司新闻；产品中心的下拉菜单项有产品分类1，产品分类2，产品分类3

如果对你有用，请采纳，谢谢
你可以使用原生Javascript实现一个下拉菜单。

  1. HTML结构
    在HTML中，你需要为新闻中心和产品中心分别创建一个下拉菜单。下拉列表中应该包含菜单项。以下是一个基本的HTML结构：
<ul class="dropdown-menu">
  <li class="dropdown-item">
    <a href="#">行业新闻</a>
  </li>
  <li class="dropdown-item">
    <a href="#">公司新闻</a>
  </li>
</ul>
 <ul class="dropdown-menu">
  <li class="dropdown-item">
    <a href="#">产品分类1</a>
  </li>
  <li class="dropdown-item">
    <a href="#">产品分类2</a>
  </li>
  <li class="dropdown-item">
    <a href="#">产品分类3</a>
  </li>
</ul>
  1. CSS样式
    通过CSS样式可以使下拉菜单的样式更美观和易于使用。以下是一个基本的CSS样式：
.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
}
 .dropdown-item a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}
 .dropdown-item:hover {
  background-color: #f5f5f5;
}
  1. Javascript实现
    在Javascript中，你需要监听点击事件并切换下拉菜单的可见性。以下是一个基本的Javascript代码：
const newsDropdown = document.querySelector('#news-dropdown');  // 获取新闻中心下拉菜单
const productDropdown = document.querySelector('#product-dropdown');  // 获取产品中心下拉菜单
 // 添加点击事件监听器
newsDropdown.addEventListener('click', function() {
  const menu = this.querySelector('.dropdown-menu');  // 获取下拉菜单
  menu.style.display = (menu.style.display === 'block') ? 'none' : 'block';  // 切换可见性
});
 // 添加点击事件监听器
productDropdown.addEventListener('click', function() {
  const menu = this.querySelector('.dropdown-menu');  // 获取下拉菜单
  menu.style.display = (menu.style.display === 'block') ? 'none' : 'block';  // 切换可见性
});

在上面的代码中，我们首先获取新闻中心和产品中心下拉菜单的元素，然后分别给它们添加点击事件监听器。当点击下拉菜单时，获取目标下拉菜单的子元素（即下拉菜单项）并切换其可见性。
通过这些基本的HTML、CSS和Javascript代码，你可以实现一个简单的下拉菜单。当然，你也可以根据需要进行更多的自定义和功能扩展。