Bootstrap 3.4.1折叠功能失效，PHPStorm不识别data-toggle/data-target

我来帮你搞定这两个问题！先从折叠功能失效的核心原因说起：

一、修复Collapse折叠功能失效 #

你的代码里有几个关键问题导致按钮点击没反应：

• 缺少jQuery依赖：Bootstrap 3的所有JS组件（包括collapse）都完全依赖jQuery，你现在根本没引入这个核心库，这是最主要的问题！
• 重复引入Bootstrap JS：你同时加载了bootstrap.js和bootstrap.min.js，这俩是同一个文件的不同版本，留一个就行，推荐用min版减少加载体积。
• 脚本加载顺序错误：把JS放在<head>里的话，DOM元素还没加载完成，Bootstrap没法给按钮绑定折叠事件，最好把JS脚本移到</body>标签之前。

修正后的完整代码： #

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>TESTING</title>
    <!-- 先引入Bootstrap样式 -->
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
</head>
<body>
<div class="navbar navbar-default">
    <div class="navbar-header">
        <button class="btn btn-success navbar-toggle collapsed" data-toggle="collapse" data-target="#MINE">
            <span class="glyphicon glyphicon-chevron-down"></span>
        </button>
    </div>
    <div id="MINE" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="nav"><a href="Home.html">Home</a></li>
            <li class="nav"><a href="About.html">About</a></li>
            <li class="nav"><a href="Books.html">Books</a></li>
            <li class="nav"><a href="Films.html">Films</a></li>
            <li class="nav"><a href="Contact.html">Contact</a></li>
        </ul>
    </div>
</div>

<!-- 先引入jQuery，再引入Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>

注：我把data-target改成了#MINE（用ID选择器更精准），你也可以继续用.navbar-collapse，效果是一样的。另外jQuery的版本推荐用Bootstrap 3兼容的版本（比如3.x到3.6.x之间的版本，避免太新的版本出现兼容问题）。

二、解决PHPStorm不识别data-toggle/data-target属性 #

这是因为这些是Bootstrap的自定义data属性，PHPStorm默认不认识，有两种解决方法：

• 方法一：安装Bootstrap插件
  打开PHPStorm的Settings > Plugins，在市场里搜索「Bootstrap」，安装官方的Bootstrap插件，重启IDE后就能自动识别这些属性了，还能获得Bootstrap代码提示。

• 方法二：手动添加忽略属性
  打开Settings > Languages & Frameworks > HTML > Inspections，找到「Unknown HTML attribute」选项，点击「Add」按钮，分别添加data-toggle和data-target，这样IDE就不会再把这些属性标红了。

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