Bootstrap 5.3.0下拉菜单在iPad端无法展开问题求助

你的导航栏在iPad上点击按钮无法展开下拉列表，主要是以下代码错误导致的：

• 选择器语法错误：jQuery代码中$('dropdown-toggle')缺少类选择器前缀.，无法正确选中目标元素，正确写法应为$('.dropdown-toggle')。
• ID拼写不匹配：按钮的data-target="#navbarToggleButton"与折叠区域的id="navbarTogglerButton"拼写不一致（Toggle vs Toggler），导致点击事件无法关联到对应的折叠容器。
• Bootstrap 5属性前缀问题：若使用Bootstrap 5，需用data-bs-target替代data-target——Bootstrap 5对所有交互类data属性添加了bs-前缀。
• 缺失Bootstrap JS文件：导航栏折叠功能依赖Bootstrap JavaScript实现，你的代码中仅引入了jQuery和自定义脚本，未加载Bootstrap JS。

修复后的完整代码 #

<!-- 先引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="">APIzoid</a>
    <!-- 修正data属性前缀与ID匹配 -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerButton" aria-controls="navbarTogglerButton" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button> 
    <!-- 保持ID与按钮的data-bs-target一致 -->
    <div class="collapse navbar-collapse" id="navbarTogglerButton">
      <ul class="navbar-nav ms-auto me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>  
        </li>
        <li class="nav-item"> 
          <a class="nav-link active" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Fitness</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- 严格遵循加载顺序：jQuery → Bootstrap JS → 自定义脚本 -->
<script src="jquery/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="./javascript/script.js"></script>

<!-- 修正后的自定义脚本（若不需要手动初始化可移除，Bootstrap会通过data属性自动初始化） -->
<script type="text/javascript">
$(document).ready(function() {
  $('.dropdown-toggle').dropdown();
});
</script>

额外注意事项 #

• 确保Bootstrap CSS与JS版本一致，避免兼容性问题；
• 若使用Bootstrap 4，无需修改data-target前缀，但仍需保证ID拼写匹配；
• 测试时清空iPad浏览器缓存，避免旧代码干扰。

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