Bootstrap 3下拉导航按钮在iPhone移动端无响应问题求助

看起来你遇到的问题是动态加载导航组件后，Bootstrap的下拉插件没有正确初始化导致的，再加上代码里的一些小隐患，一起来搞定它：

核心原因 #

当你用$('#header').load()异步加载Header.jsp时，$(document).ready()已经执行完毕——Bootstrap的下拉插件在页面初始加载时，找不到还未被插入到DOM的导航元素，自然不会给它绑定点击事件。这就是桌面端（初始渲染的元素）正常，移动端（动态加载的元素）失效的关键。

另外，你的代码里还有个隐藏坑：下拉按钮和下拉列表用了同一个ID dropdown，重复ID会导致DOM选择器混乱，也可能干扰插件的正常工作。

分步解决方案 #

1. 修复重复ID问题 #

修改Header.jsp里的导航代码，给按钮和列表设置不同的ID，并确保data-target关联正确：

<sec:authorize access="hasRole('ROLE_USER')">
  <!-- 修改按钮ID为dropdownToggle，添加data-target指向下拉列表 -->
  <a class="dropdown-toggle" id="dropdownToggle" type="button" data-toggle="dropdown" data-target="#dropdownMenu">
    &#9776; <span class="caret"></span>
  </a>
  <!-- 修改下拉列表ID为dropdownMenu -->
  <ul class="dropdown-menu" id="dropdownMenu">
    <li>
      <div class="col-sm-2 align-top " id="home">
        <a href="${pageContext.request.contextPath}/displayHomePage"><span class="glyphicon glyphicon-home"></span></a>
      </div>
    </li>
    <li>
      <div class="col-sm-2 align-top " id="home">
        <a href="${pageContext.request.contextPath}/displayAboutUsPage"> About Us</a>
      </div>
    </li>
    <li>
      <div class="col-sm-2 align-top " id="news">
        <a href="${pageContext.request.contextPath}/displayNewsFeedPage">News</a>
      </div>
    </li>
    <li>
      <div class="col-sm-2 align-top " id="blog">
        <a href="${pageContext.request.contextPath}/displayNewPostPage">Posts</a>
      </div>
    </li>
    <li>
      <div class="col-sm-2 align-top " id="home">
        <a href="${pageContext.request.contextPath}/displayRegistrationForm">sign up</a>
      </div>
    </li>
    <li>
      <div class="col-sm-2 align-top " id="log-in">
        <a href="${pageContext.request.contextPath}/">Sign In</a>
      </div>
    </li>
  </ul>
</sec:authorize>

2. 动态加载后重新初始化Bootstrap下拉插件 #

在load()方法的回调函数里手动初始化下拉组件——回调会在Header加载完成后执行，此时DOM里已经有了导航元素：

$(document).ready(function () {
  console.log("testing");
  $('#header').load('jsp/Header.jsp', function() {
    // 加载完成后初始化下拉插件
    $('#dropdownToggle').dropdown();
  });
  $('#footer').load('jsp/Footer.jsp');
});

3. 额外检查项 #

• 确保jQuery在Bootstrap JS之前加载：你的Header.jsp里已经按jQuery → bootstrap.min.js的顺序加载了，这点没问题，但要确认index.jsp里没有重复加载或者顺序颠倒的情况。
• 验证viewport标签：你已经添加了<meta name="viewport" content="width=device-width, initial-scale=1">，这是Bootstrap响应式生效的前提，保持即可。
• 确认Spring Security的sec:authorize在移动端正常渲染：确保登录状态下，导航元素确实被插入到DOM中，可以通过浏览器开发者工具查看移动端页面的DOM结构。

这样调整后，移动端点击下拉按钮应该就能正常展开列表了！

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