最近碰见一个很费解的问题。
问题描述
页面中的bootstrap-table的右上角的按钮，如下图：
正常情况下，点击应该会出现下拉框：
但是问题来了，这个下拉框，时而有效，时而无效，准确说，我碰到的情况是，重新加载一次页面有效，再加载又失效了，如此循环反复。
最为尴尬的是，没有任何报错，没有任何报错，该加载的也都加载了，毫无头绪。
分析
在浏览器中将bootstrap的表格层层剥开，发现bootstrap的表格是通过“dropdown-toggle”来实现按钮下拉功能的，通过查阅资料，发现这个dropdown-toggle确实出现过类似的情况，原因也比较统一，就是bootstrap.js或者bootstrap.min.js的重复导入加载。
但是有了可能原因的猜测以后，我翻遍了我的网页代码，确认没有重复导入上述js文件。那么问题出现在哪？
昨晚睡觉之前，突然灵感一现，想起来我这次用的网页的模式是这样的：
<body>
<!-- head 头部 -->
<div id="head" th:replace="base/header :: copy"></div>
<div id="wrapper">
<!--tree菜单 -->
<div id="tree" th:replace="base/tree :: copy"></div>
<!--内容-->
<div id="content" ></div>
<div id="footer" th:replace="base/footer :: copy"></div>
</div>
<script th:inline="javascript" src="../base/home.js"></script>
</body>
是通过整体布局，然后是通过 th:replace=“base/tree :: copy” 来将各个部分的网页代码copy，即整体复制进这个主页面的。
那么问题就来了，那有没有可能是在别的副页面存在bootstrap.js或者bootstrap.min.js，因此出现了重复导入呢？
解决
果然，在id="footer"的页面中，看到了这一条：
<div id="footer" th:fragment="copy">
<script src="../js/home/jquery-migrate-1.2.1.min.js"></script>
//看这
<script src="../js/bootstrap/bootstrap.min.js"></script>
<script src="../js/bootstrap/bootstrap-hover-dropdown.js"></script>
<script src="../js/home/jquery.menu.js"></script>
<script src="../js/common/dataTableParam.js"></script>
<script src="../js/home/jquery.slimscroll.js"></script>
<script src="../js/home/jquery.metisMenu.js"></script>
<script src="../js/home/icheck.min.js"></script>
<!--<script src="../js/home/main.js"></script>-->
</div>
而我在id=“content” 的页面中，同样导入了如下：
<script th:src="@{/allow/bootstrap/js/jquery-3.4.1.min.js}"></script>
//看这
<script th:src="@{/allow/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/allow/bootstrap/js/bootstrap-table.min.js}"></script>
<script th:src="@{/allow/bootstrap/js/bootstrap-table-zh-CN.js}"></script>
<script th:src="@{/allow/bootstrap/js/bootstrap-table-export.js}"></script>
<script th:src="@{/allow/bootstrap/js/FileSaver.min.js}"></script>
<script th:src="@{/allow/bootstrap/js/xlsx.core.min.js}"></script>
<script th:src="@{/allow/bootstrap/js/tableExport.js}"></script>
<script th:src="@{/allow/bootstrap/js/jquery.base64.js}"></script>
<script th:src="@{/allow/js/jquery.form.js}"></script>
果然，知道了问题出在哪，就好解决了。
将id="footer"里的bootstrap.min.js，删除。
问题果然解决了。
总结
暴露出几个问题：
１、主要还是因为这次使用的模板是网上别人提供的，没有特别熟悉。
２、对于bootstrap的具体需要加载的元素的情况不够了解。
