JS点击事件异常：页面加载后菜单栏无响应、购物车需两次点击展开

问题根因 #

你遇到的所有异常都是同一个核心问题导致的：

• element.style.display 只能读取元素行内style属性中设置的样式，你两个下拉组件的display: none是写在外部CSS中的，页面首次加载时，showShopping.style.display和showMenu.style.display的值是空字符串""，完全匹配不到你代码里== 'none'的判断条件，所以初始点击时所有分支都不会触发预期逻辑。
• 当你第一次操作购物车后，代码已经给元素手动设置了行内的display属性值，后续判断就能正常命中，所以逻辑就恢复正常了。
• 补充：你在绑定购物车点击事件时，回调中引用的showMenu变量是在事件绑定完成后才赋值的，虽然var变量提升不会直接报错，但不符合变量先定义后使用的规范。

修复方案 #

方案1：最简修复（直接给元素初始化行内样式） #

在JS最开头给两个下拉框手动设置初始行内display值，保证后续判断逻辑能正常命中：

var showShoppingBtn = document.getElementById('shopping-cart');
var showShopping = document.getElementById('top-dropdown');
var menuBtn = document.getElementById('menu-button');
var showMenu = document.getElementById('bottom-dropdown');

// 初始化设置行内样式，和CSS保持一致
showShopping.style.display = 'none';
showMenu.style.display = 'none';

showShoppingBtn.addEventListener('click', ()=>{
    if(showShopping.style.display == 'none' && showMenu.style.display == 'none'){
        showShopping.style.display = 'block';
    } 
    else if(showShopping.style.display == 'none' && showMenu.style.display == 'block'){
        showMenu.style.display = 'none';
        showShopping.style.display = 'block';
    }
    else {
        showShopping.style.display = 'none';
    }
});

menuBtn.addEventListener('click', ()=>{
    if(showMenu.style.display == 'none'  && showShopping.style.display == 'none'){
        showMenu.style.display = 'block';
    } else if(showMenu.style.display == 'none' && showShopping.style.display == 'block'){
        showShopping.style.display = 'none';
        showMenu.style.display = 'block';
    } else {
        showMenu.style.display = 'none';
    }
});

方案2：更规范的类名控制方案（推荐） #

不用直接操作style，通过切换active类控制显示隐藏，后续维护更方便：

1. 先在CSS中新增规则：

.top-dropdown.active, .bottom-dropdown.active {
    display: block;
}

2. 修改JS逻辑：

var showShoppingBtn = document.getElementById('shopping-cart');
var showShopping = document.getElementById('top-dropdown');
var menuBtn = document.getElementById('menu-button');
var showMenu = document.getElementById('bottom-dropdown');

showShoppingBtn.addEventListener('click', () => {
  const isShoppingActive = showShopping.classList.contains('active');
  const isMenuActive = showMenu.classList.contains('active');
  if (isMenuActive) showMenu.classList.remove('active');
  showShopping.classList.toggle('active', !isShoppingActive);
});

menuBtn.addEventListener('click', () => {
  const isShoppingActive = showShopping.classList.contains('active');
  const isMenuActive = showMenu.classList.contains('active');
  if (isShoppingActive) showShopping.classList.remove('active');
  showMenu.classList.toggle('active', !isMenuActive);
});

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