Bootstrap 5 与 E-junkie 购物车在集成时可能出现不兼容问题，主要表现为在较小屏幕上导航栏的折叠按钮失效。通过分析问题原因，本文提供了两种解决方案：一是引入完整版本的 jQuery 和 jquery-migrate 库，二是告知 Bootstrap 禁用 jQuery 支持。 两种方法都能够有效避免 E-junkie 提供的简化版 jQuery 与 Bootstrap 之间的冲突，从而恢复导航栏折叠按钮的正常功能。
问题分析
当 Bootstrap 5 与 E-junkie 购物车同时使用时，可能会遇到导航栏折叠按钮无法正常工作的问题，并在浏览器的开发者工具中看到类似 "Uncaught TypeError: n.Event is not a function" 的错误。
问题的根源在于 E-junkie 为了自身的功能实现，会在页面上引入一个简化版的 jQuery。而 Bootstrap 5 在检测到页面存在 jQuery 时，会尝试使用 jQuery 的插件系统。由于 E-junkie 提供的 jQuery 版本不完整，缺少 Bootstrap 5 所需的某些方法（如 Event 属性），导致 Bootstrap 5 的相关功能（如导航栏折叠）无法正常运行。
解决方案
针对上述问题，可以采用以下两种解决方案：
方案一：引入完整版 jQuery 和 jQuery Migrate
此方案的核心思想是：提供一个完整的 jQuery 环境，让 Bootstrap 5 可以正常地利用 jQuery 的插件系统。
-
引入 jQuery: 在 Bootstrap 5 和 E-junkie 的脚本之前，引入最新版本的 jQuery 库。例如：
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
-
引入 jQuery Migrate: 由于 Bootstrap 5 与最新版本的 jQuery 可能存在兼容性问题，因此还需要引入 jQuery Migrate 库，以确保向后兼容。
<script src="https://code.jquery.com/jquery-migrate-3.4.1.js"></script>
代码示例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SongKong Music Tagger</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.4.1.js"></script>
</head>
<!-- /head -->
<body style="padding-top: 100px;">
<!-- header -->
<div class="container-fluid fixed-top" style="background-image: url(/songkong/images/songkongheader.png);">
<div class="navbar container-fluid navbar-expand-lg navbar-dark mx-auto justify-content-center">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-item nav-link" href="https://www.jthink.net/songkong/en/news.jsp">
News
</a>
<a class="nav-item nav-link" href="https://www.fatfreecartpro.com/ecom/gb.php?c=cart&ejc=2&cl=347010" target="ej_ejc" onclick="return EJEJC_lc(this);">
View Cart
</a>
</div>
</div>
</div>
</div>
<!-- footer -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script type="text/javascript">function EJEJC_lc(th) { return false; }; </script>
<script src="https://www.fatfreecartpro.com/ecom/box_fb_n.js" type="text/javascript"></script>
</body>
</html>方案二：禁用 Bootstrap 的 jQuery 支持
此方案的核心思想是：告知 Bootstrap 5 不要使用 jQuery，即使页面上存在 jQuery。这样可以避免 Bootstrap 5 错误地使用 E-junkie 提供的简化版 jQuery。
-
添加 data-bs-no-jquery 属性: 在 <body> 标签中添加 data-bs-no-jquery="true" 属性。
<body style="padding-top: 100px;" data-bs-no-jquery="true">
代码示例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SongKong Music Tagger</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<!-- /head -->
<body style="padding-top: 100px;" data-bs-no-jquery="true">
<!-- header -->
<div class="container-fluid fixed-top" style="background-image: url(/songkong/images/songkongheader.png);">
<div class="navbar container-fluid navbar-expand-lg navbar-dark mx-auto justify-content-center">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-item nav-link" href="https://www.jthink.net/songkong/en/news.jsp">
News
</a>
<a class="nav-item nav-link" href="https://www.fatfreecartpro.com/ecom/gb.php?c=cart&ejc=2&cl=347010" target="ej_ejc" onclick="return EJEJC_lc(this);">
View Cart
</a>
</div>
</div>
</div>
</div>
<!-- footer -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script type="text/javascript">function EJEJC_lc(th) { return false; }; </script>
<script src="https://www.fatfreecartpro.com/ecom/box_fb_n.js" type="text/javascript"></script>
</body>
</html>总结
当 Bootstrap 5 与 E-junkie 购物车同时使用时，如果遇到导航栏折叠按钮失效的问题，可以尝试以上两种解决方案。 第一种方案通过提供完整的 jQuery 环境来解决冲突，而第二种方案则通过禁用 Bootstrap 的 jQuery 支持来避免冲突。 根据实际情况选择合适的方案，即可解决兼容性问题，恢复导航栏的正常功能。
