WordPress/WooCommerce中Bootstrap下拉菜单点击报错：链接被当作选择器

问题原因 #

你给「Buy Now」按钮加了data-toggle="dropdown"属性，Bootstrap的下拉组件会自动监听带这个属性的元素。它的处理逻辑是：

• 先读取元素的data-target属性作为目标选择器
• 如果没有data-target或者值为#，就会把href属性的值当作选择器，调用document.querySelector()去查找下拉菜单
• 但你的href是完整的URL（https://new-car.net.ua/checkout/?buy-now=360），这不是合法的CSS选择器，所以直接触发了DOM异常错误
• 同时你自己写了点击事件，和Bootstrap的内置下拉事件形成双重处理冲突

解决方法 #

方案1：完全自定义下拉逻辑（脱离Bootstrap自动处理） #

步骤1：修改HTML，移除Bootstrap触发属性

把a标签里的data-toggle="dropdown"删掉，让Bootstrap不再自动干预这个按钮：

<a href="https://new-car.net.ua/checkout/?buy-now=<?php echo get_the_ID(); ?>" class="dropdown-toggle" id="dropdownMenuLink" aria-haspopup="true" aria-expanded="false">Buy Now</a>

<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
   <a class="dropdown-item" href="#">Buy Left</a>
   <a class="dropdown-item" href="#">Buy Right</a>
   <a class="dropdown-item" href="#">Buy Both</a>
</div>

步骤2：调整JS代码，阻止默认跳转

a标签默认点击会跳转页面，必须阻止这个行为才能正常显示下拉菜单：

window.addEventListener('DOMContentLoaded', function () {
  const toggleButton = document.querySelector('.dropdown-toggle')
  const dropdownMenu = document.querySelector('.dropdown-menu')
  
  // 先判断元素是否存在，避免页面无对应元素时报错
  if (toggleButton && dropdownMenu) {
    toggleButton.addEventListener('click', function (e) {
      // 阻止a标签的默认跳转行为
      e.preventDefault();
      dropdownMenu.classList.toggle('show')
    })
    
    // 可选：点击页面其他区域自动关闭下拉菜单
    document.addEventListener('click', function(e) {
      if (!toggleButton.contains(e.target) && !dropdownMenu.contains(e.target)) {
        dropdownMenu.classList.remove('show')
      }
    })
  }
})

注：用DOMContentLoaded比window.onload更高效，它会在DOM加载完成后立即执行，无需等待所有资源加载完毕。

方案2：保留Bootstrap下拉组件功能 #

如果你想继续用Bootstrap的原生下拉交互，不用自己写JS，只需要调整href指向下拉菜单的ID，再把具体购买链接放到下拉选项里：

<a href="#dropdownMenu" class="dropdown-toggle" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Buy Now</a>

<div class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenuLink">
   <a class="dropdown-item" href="https://new-car.net.ua/checkout/?buy-now=<?php echo get_the_ID(); ?>&side=left">Buy Left</a>
   <a class="dropdown-item" href="https://new-car.net.ua/checkout/?buy-now=<?php echo get_the_ID(); ?>&side=right">Buy Right</a>
   <a class="dropdown-item" href="https://new-car.net.ua/checkout/?buy-now=<?php echo get_the_ID(); ?>&side=both">Buy Both</a>
</div>

这种方式下，Bootstrap会自动处理下拉菜单的显示/隐藏，你只需要给每个下拉选项配置对应的购买链接即可。

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