如何实现页面加载时下拉菜单顶部元素默认展开

需实现的功能：

• 页面加载完成时，顶部下拉菜单默认展开
• 点击菜单外部或其他下拉项时，已展开的菜单自动关闭
• 顶部下拉菜单展开样式与底部两个菜单一致

以下是修复后的完整代码及关键修改说明：

修正后的HTML #

<link rel="stylesheet" href="styles.css">
<div class="dropdown-container-var">
  <p2><a3 href="#">Surface and Precipitation</a3></p2>
  <ul class="dropdown-list-var" id="top-dropdown">
    <li class="optgroup">Surface</li>
    <li><a2 href="#">2m Temperature</a2></li>
    <li><a2 href="#">2m Dewpoint</a2></li>
    <li><a2 href="#">Mean Sea Level Pressure</a2></li>
    <li><a2 href="#">10m Wind</a2></li>
  </ul>
</div>
<div class="dropdown-container-var">
  <p2><a3 href="#">Upper-Air: Dynamics</a3></p2>
  <ul class="dropdown-list-var">
    <li class="optgroup">Vorticity</li>
    <li><a2 href="#">500 hPa Height,Wind,Vorticity</a2></li>
    <li><a2 href="#">700 hPa Height,Wind,Vorticity</a2></li>
    <li><a2 href="#">850 hPa Height,Wind,Vorticity</a2></li>
  </ul>
</div>
<div class="dropdown-container-var">
  <p2><a3 href="#">Upper-Air: Temperature,Wind</a3></p2>
  <ul class="dropdown-list-var">
    <li class="optgroup">Temperature</li>
    <li><a2 href="#">700 hPa Temperature, Height, Wind</a2></li>
    <li><a2 href="#">850 hPa Temperature, Height, Wind</a2></li>
    <li><a2 href="#">925 hPa Temperature, Height, Wind</a2></li>
  </ul>
</div>
<script src="script.js"></script>

修正后的CSS #

a3 {
  color: white;
  text-decoration: none;
  transition: background-color 0.2s;
}

a2 {
  color: black;
  text-decoration: none;
  transition: background-color 0.2s;
}

.dropdown-container-var {
  position: relative;
  background-color: #333;
  color: white;
  text-decoration: none;
  width: 600px;
  text-align: center;
  transition: background-color 0.2s;
  cursor: pointer;
  margin: 0;
}

.dropdown-container-var:hover {
  background-color: #525252;
  transition: background-color 0.2s;
}

.dropdown-list-var {
  position: relative;
  display: none;
  list-style-type: none;
  padding: 0;
  left: 0;
  transition: border 0.2s;
  background-color: #b0b0b0;
  color: black;
  text-decoration: none;
  width: 600px;
  text-align: center;
  transition: background-color 0.2s;
  cursor: pointer;
  margin: 0;
}

.dropdown-list-var li:hover {
  background-color: #04AA6D;
  transition: background-color 0.2s;
}

.dropdown-list-var li {
  color: black;
  text-align: center;
  transition: background-color 0.2s;
  padding: 8px 0;
}

p2 {
  margin: 0;
  padding: 8px 0;
}

.dropdown-list-var li.optgroup {
  font-weight: bold;
  color: black;
  width: 100%;
  cursor: default;
  background-color: #999;
}

重构后的JavaScript #

// 获取所有下拉容器和下拉列表
const dropdownContainers = document.querySelectorAll(".dropdown-container-var");
const dropdownLists = document.querySelectorAll(".dropdown-list-var");
const topDropdown = document.getElementById("top-dropdown");

// 页面加载完成后展开顶部下拉菜单
window.addEventListener('load', () => {
  topDropdown.style.display = 'block';
});

// 为每个下拉容器添加点击事件
dropdownContainers.forEach(container => {
  container.addEventListener('click', (e) => {
    e.stopPropagation();
    
    const currentList = container.querySelector(".dropdown-list-var");
    
    // 关闭其他所有下拉菜单
    dropdownLists.forEach(list => {
      if (list !== currentList) {
        list.style.display = 'none';
      }
    });
    
    // 切换当前菜单显示状态
    currentList.style.display = currentList.style.display === 'block' ? 'none' : 'block';
  });
});

// 点击页面外部区域关闭所有下拉菜单
document.addEventListener('click', () => {
  dropdownLists.forEach(list => {
    list.style.display = 'none';
  });
});

// 处理下拉项跳转逻辑
document.querySelectorAll(".dropdown-list-var li a2").forEach(link => {
  link.addEventListener('click', (e) => {
    e.stopPropagation();
    window.location.href = link.getAttribute('href');
  });
});

关键修改点 #

• HTML结构修复：移除错误嵌套的<select>、<optgroup>标签，改用<li class="optgroup">实现分组标题，避免结构异常导致的样式问题
• CSS优化：修复多余的语法错误，为菜单元素添加内边距提升交互感，统一分组标题样式
• JS逻辑重构：
  • 删除重复的事件监听，简化代码逻辑
  • 实现页面加载时默认展开顶部菜单
  • 点击下拉容器时自动关闭其他菜单，切换当前菜单状态
  • 点击页面外部区域关闭所有菜单
  • 阻止下拉项点击事件冒泡，避免触发菜单切换逻辑

内容的提问来源于stack exchange，提问作者Wx_Trader