如何让调用不同jQuery库的侧边菜单与手风琴脚本同时正常运行？

问题根源 #

页面先后加载了jQuery 2.2.4、jQuery 3.5.1两个版本，后加载的版本会覆盖全局的$和jQuery变量，导致先加载的jQuery上绑定的侧边菜单交互逻辑丢失，就会出现两个功能互斥的情况。

推荐解决方案（改最少代码即可生效） #

Bootstrap 3.4.1本身兼容jQuery 1.9.1及以上所有版本，完全支持你现在用的jQuery 2.2.4，不需要额外引入jQuery 3.5.1，直接删掉手风琴模块前的jQuery 3.5.1引入即可。
调整后<head>里的资源引入顺序如下：

<head>
<link rel="stylesheet" href="../assets/css/common.css">
<link rel="stylesheet" href="style.css">

<!-- 只保留这一个jQuery引入即可 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!-- 侧边菜单使用的脚本 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110784497-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-110784497-1');
</script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- 删掉原来这里的jQuery 3.5.1引入 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

调整后两个功能都会正常运行，是成本最低的解决方式。

特殊场景方案：如果必须保留两个jQuery版本 #

如果你的侧边菜单逻辑只能运行在jQuery 2.2.4，手风琴有特殊依赖必须用jQuery 3.5.1，可以用jQuery.noConflict()做版本隔离：

1. 加载完jQuery 2.2.4之后，立刻执行代码把该版本存到单独变量：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
// 将2.2.4版本的jQuery绑定到jq2变量，释放全局的$和jQuery变量
var jq2 = $.noConflict(true);
</script>

2. 后续正常加载jQuery 3.5.1和Bootstrap js，手风琴相关逻辑用默认的$调用即可
3. 侧边菜单的所有初始化逻辑，把原来的$全部替换成jq2即可，比如原来的$('#toggle_button').click(...)改成jq2('#toggle_button').click(...)

额外小修正 #

你侧边菜单按钮的href属性写错了，当前是javascript void(0)，缺少冒号，建议改成javascript:void(0)，避免点击时跳转异常。

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