使用HTML与CSS编写的drop down menu无法展开子菜单如何修复

问题原因汇总 #

你的代码是基于Bootstrap3的下拉组件实现，无法触发展开主要有以下几个可复现的问题：

• 依赖缺失/引入顺序错误：Bootstrap下拉组件依赖jQuery和Bootstrap自身的JS文件，必须按「jQuery → Bootstrap CSS → Bootstrap JS」的顺序引入，缺一不可。
• 重复ID冲突：三个下拉触发按钮的id均为dropdownMenu1，对应下拉菜单的aria-labelledby也绑定了同一个ID，不符合DOM id唯一的规范，会导致点击事件绑定混乱。
• 触发元素属性缺失：作为触发元素的<a>标签没有添加href="#"属性，部分浏览器会判定该元素不可交互，拦截点击事件。

修正后的完整代码 #

<div id="control-panel" class="col-xs-10 col-xs-offset-1 row">
    <!-- 时间下拉 -->
    <div id="time-dropdown" class="dropdown col-xs-3">
      <a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true" href="#">
        Any Time
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Any Time</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Past Week</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Past Month</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Past Year</a></li>
      </ul>
    </div>

    <!-- 结果数量下拉 -->
    <div id="num-results-dropdown" class="dropdown col-xs-3">
      <a class="dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true" href="#">
        10 Results
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">10 Results</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">20 Results</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">30 Results</a></li>
      </ul>
    </div>

    <!-- TLD下拉 -->
    <div id="tld-dropdown" class="dropdown col-xs-3">
      <a class="dropdown-toggle" id="dropdownMenu3" data-toggle="dropdown" aria-expanded="true" href="#">
        Any TLD
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Any TLD</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">.edu</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">.gov</a></li>
      </ul>
    </div>
</div>

额外校验项 #

如果修改后仍然无法触发下拉，可以在页面加载完成后手动初始化下拉组件：

$(document).ready(function(){
    $('.dropdown-toggle').dropdown();
})

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