Bootstrap 3中data-target属性无法正常工作问题排查

我帮你梳理几个最常见的原因和对应的解决办法，你可以对照自己的代码逐一排查：

1. 缺少必要的JavaScript文件（最常见原因） #

Bootstrap 3的交互组件（比如模态框、折叠面板、下拉菜单等依赖data-target的功能）必须依赖jQuery和Bootstrap自身的JavaScript文件才能正常运行。从你提供的代码来看，只引入了Bootstrap的CSS，完全没加JS部分，这肯定会导致data-target失效。

解决办法：在页面的<body>末尾（或者<head>里，但推荐放body末尾优化加载）引入jQuery和Bootstrap JS，注意顺序必须是先jQuery，再Bootstrap JS：

<!-- 引入jQuery（Bootstrap 3兼容jQuery 1.9.1到3.x版本，选一个稳定版即可） -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<!-- 引入Bootstrap 3的JavaScript文件 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2. data-target的选择器格式错误 #

data-target的值需要是合法的CSS选择器，如果你要定位某个ID元素，必须加#前缀；定位类元素则加.前缀。很多人会犯的错误是直接写元素名称，比如写成data-target="myModal"而不是data-target="#myModal"。

举个正确的例子（比如触发模态框）：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<!-- 对应的目标模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <!-- 模态框内容 -->
</div>

3. 目标元素不存在或选择器不匹配 #

检查页面中是否存在data-target指向的元素，并且确保ID/类名的拼写、大小写完全一致（HTML的ID是大小写敏感的）。比如data-target="#MyModal"就无法匹配<div id="mymodal">。

4. HTML文档类型问题 #

你当前用的是HTML 4.0 Strict的DOCTYPE：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

Bootstrap 3是基于HTML5设计的，HTML4的DOCTYPE可能会引发一些兼容性问题，影响JavaScript的正常执行。建议改成HTML5的标准DOCTYPE：

<!DOCTYPE html>

修正后的header.php示例 #

结合以上几点，把你的header.php调整成这样：

<!DOCTYPE html>
<html lang="EN">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="shortcut icon" href="images/logo.jpg" type="image/x-icon" />
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <!-- 页面内容 -->

  <!-- 放在body末尾的JS文件 -->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

按照上面的步骤排查调整后，data-target应该就能正常工作了。

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