Javascript 在同一页面中使用两个jQuery库

我正在创建一个自定义页面，其中菜单需要一个jQuery库，弹出窗口需要另一个。当我把弹出jQuery放在代码的末尾时，只有弹出函数起作用，它会停止我的菜单动画。如果我做相反的操作，菜单工作，弹出按钮停止工作。为什么会发生这种情况？我如何解决此问题？提前谢谢

网络地图
html，正文
{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
#地图
{
高度：500px；
宽度：100%；
位置：相对位置；
左：0；
z指数：0；
}
span.reference
{
位置：绝对位置；
左：600px；
底部：10px；
字体大小：20px；
}
参考文献a
{
颜色：#aaa；
文本转换：大写；
文字装饰：无；
文本阴影：1px 1px 1px#000；
右边距：30px；
}
参考a：悬停
{
颜色：#ddd；
}
ul.sdt_菜单
{
边际上限：0px；
}
分区横幅
{
宽度：1350px；
高度：40px；
保证金：0px自动；
边框：#639 1px实心；
溢出：隐藏；
}
分区#横幅>#横幅#背景
{
位置：相对位置；
高度：40px；
}
div#banner>#banner#u内容
{
位置：相对位置；
宽度：96%；
高度：40px；
边缘顶部：10px；
顶部：-40px；
颜色：#0099CC；
字体大小：20px；
左：100px；
文本阴影：1px 1px 1px#000；
文本转换：大写；
}
分区#横幅>#img1
{
位置：绝对位置；
背景：url（images/isrologo.png）不重复；
宽度：80px；
高度：70像素；
顶部：0px；
左：0px；
}
分区#横幅>#img2
{
位置：绝对位置；
背景：url（images/title.png）不重复；
宽度：80px；
高度：70像素；
顶部：0px；
左：1280px；
}
.ol鼠标位置
{
顶部：自动；
底部：2米；
}
.ol概览图
{
底部：2米；
}
.ol动物滑翔机
{
顶部：10em；
}
.ol轮换
{
顶部：2.5em；
}
.抽签点
{
右：3em；
顶部：.5em；
}
#包装纸
{
位置：相对位置；
宽度：100%；
高度：80px；
位置：相对位置；
z指数：1；
背景色：#009999；
}
.col-lg-6{
宽度：100px；
左边距：200px；
}
地理空间信息




















--选择状态--
--印度--
--选择地区--
--选择村庄--
版权所有
var landuseLayer=新ol.layer.Image({
座标：[-124.7314220000001,24.955967，
-66.969849, 49.371735],
来源：新ol.source.ImageWMS({
网址：'http://localhost:8080/geoserver/topp/wms',
参数：{'LAYERS'：'topp:states'}，
最大缩放：19
}),
可见：假，
});
var soilLayer=新ol.layer.Image({
座标：[79.14511833527447，20.987418098133496，79.2018842619151，21.050233196545]，
来源：新ol.source.ImageWMS({
网址：'http://localhost:8080/geoserver/sagy/wms',
参数：{'LAYERS'：'sagy:pachgaon_LULC'}，
最大缩放：19
}),
可见：假
});
var map=新ol.map({
图层：[土地使用图层，土壤图层]，
渲染器：“画布”，
目标：document.getElementById（'map'），
控件：ol.control.defaults({
属性选项：({
可折叠：错误
})
}).延伸([
新的ol.control.ZoomSlider（），
新ol.control.ZoomToExtent({
范围：[
813079.7791264898, 5929220.284081122,
848966.9639063801, 5936863.986909639
<script src="jquery.latest-version.js"></script>
<script src="jquery.oldest-version.js"></script>

<script>
// Restore globally scoped jQuery variables to the first version loaded (the latest)
// and affect into `$old` the current (the oldest).
$old = $.noConflict();
console.log($); // This is the latest jQuery
console.log($old); // This is the oldest jQuery
</script>

(function (factory) {
    // Save the jQuery var already existing...
    var initialClass = window.jQuery,
        // ...and affect our jQuery.
        api = window.jQuery = factory;
    api.noConflict = function () {
        // But if `noConflict` is used, jQuery is setted by initial existing jQuery saved...
        window.jQuery = initialClass;
        // ...and our own jQuery is returned.
        return api;
    };
}(function () {
    // Normal definition of jQuery class here.
}));

<!-- load jQuery 2.2.0 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
   var jQuery_2_2_0 = $.noConflict(true);
</script>

<!-- load jQuery 1.12.0 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
   var jQuery_1_12_2 = $.noConflict(true);
</script>