How to combine two jquery libraries?

Hello toasters! There is a problem, conflict two JQuery 1.6.1.min and 3.2.1.min. One works the slider from the other menu. Actually when you connect two only works with 1.6.1, and with it running slider, once disconnected leave 1.6.1 and 3.2.1, starts menu, slider off.

Actually JS menu:
$(function() {
 var pull = $('#pull');
 menu = $('nav ul');
 menuHeight = menu.height();

 $(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
$(window).resize(function(){
 var w = $(window).width();
 if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});


Connect like this:
<script type="text/javascript" src="js/jquery_3_2_1_min.js"></script>
 <script type="text/javascript" src="js/jquery_1_6_1_min.js"></script>
 <script src="js/jquery.blueberry.js"></script>
 <script src="js/menu.js"></script>
March 20th 20 at 11:31
1 answer
March 20th 20 at 11:33
Solution
https://codepen.io/topicstarter/pen/YMmWRW further, no baseline data , so add your html and it is not clear what should be the menu.slideToggle();
It! Thank You very much. - Robert.Mo commented on March 20th 20 at 11:36
@Cornell, it happens ... - Melisa_Crem commented on March 20th 20 at 11:39
@gabe.Muraziknow menu collapses immediately after open mobile ka4ok-nutrition.ru - Robert.Mo commented on March 20th 20 at 11:42
@Cornell, I mean work ? - Melisa_Crem commented on March 20th 20 at 11:45
@gabe.Murazik, I changed the JS Blueberry to the one that gave the example of you and row
<script type="text/javascript" src="js/jquery_3_2_1_min.js"></script>
 <script type="text/javascript" src="js/jquery_1_6_1_min.js"></script>
 <script src="js/jquery.blueberry.js"></script>
 <script src="js/menu.js"></script>

Replaced
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>


After opening the mobile menu, it instantly collapses. - Robert.Mo commented on March 20th 20 at 11:48
@Cornell, do not slideToggle and toggleClass(); - Melisa_Crem commented on March 20th 20 at 11:51
@Cornell, but still different ... open jquery.min.js and copy all the code in main.js and it is insert code

$(function() {
 var pull = $('#pull');
 menu = $('nav ul');
 menuHeight = menu.height();

 $(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
$(window).resize(function(){
 var w = $(window).width();
 if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});


you can try so - Melisa_Crem commented on March 20th 20 at 11:54
@gabe.Murazik, slider and worked before. I'm talking about adaptive menus. After getting the place put 3.2.1 3.4.1 version troubles began. When you open the menu it instantly collapses.

<nav class="clearfix">
 <ul class="clearfix">
 the <li><a href="/prot.html" target="buy">Protein</a></li>
 the <li><a href="/bcaa.html" target="buy">BCAA</a></li>
 the <li><a href="/gainer.html" target="buy">weight Gainers</a></li>
 the <li><a href="/carnit.html" target="buy">L-Carnitine</a></li>
 the <li><a href="/omega3.html" target="buy">Omega 3</a></li>
 the <li><a href="/testobust.html" target="buy">Testo-boosters</a></li>
 the <li><a href="/shakers.html" target="buy">Shakers</a> </li>
 the <li><a href="/sust.html" target="buy">Joints</a></li>
 the <li><a href="/creat.html" target="buy">Creatine</a></li>
 the <li><a href="/jir.html" target="buy">fat burners</a></li>
 the <li><a href="/prework.html" target="buy">Pretrei</a></li>
 the <li><a href="/vitam.html" target="buy">Vitamins</a></li>
 the <li><a href="/ingib.html" target="buy">Inhibitors</a></li>
 the <li><a href="/vkusniahi.html" target="buy">Vkusnaja</a></li>

</ul>
 <a href="#" id="pull">Menu</a>
</nav>

$(function() {
 var pull = $('#pull');
 menu = $('nav ul');
 menuHeight = menu.height();

 $(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
$(window).resize(function(){
 var w = $(window).width();
 if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});

body {
 background-color: #ece8e5;
}
nav {
 width: 100%;
 /* background: rgba(165, 24, 24, .6); */
 font-size: 11px;
 font-family: 'PT Sans', Arial, sans-serif;
 font-weight: bold;
 position: relative;
 /* border-bottom: 1px solid #e64949; */
 /* text-align: center; */
 /* height: 80px; */
}
nav ul {
 padding: 0;
 margin: 0 auto;
 width: 100%;
 height: 40px;
 text-align: center;
}
nav li {
 display: inline-grid;
 margin-bottom: 3px;
 /* margin-top: unset; */
 border: 1px solid #da2c2c;
}
.clearfix:before,
.clearfix:after {
 content: "";
 display: table;
}
.clearfix:after {
 clear: both;
}
.clearfix {
 zoom: 1;
}
nav a {
 color: #fff;
 display: inline-block;
 width: 100px;
 text-align: center;
 text-decoration: none;
 line-height: 40px;
 text-shadow: 1px 1px 0px #283744;
}
nav li a {
 background: rgba(165, 24, 24, .6); */
 /* border: 1px solid #e64949; */
 /* border-right: 1px solid #e64949; */
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
 /* border-right: 0; */
}
nav a:hover, nav a:active {
 background-color: #a51818;
}
nav a#pull {
 display: none;
}
@media screen and (max-width: 481px) {
 nav {
 height: auto;
}
 nav ul {
 width: 100%;
 display: block;
 height: auto;
 text-align: center;
}
 nav li {
 width: 100%;
 /* float: left; */
 position: relative;
 text-align: center;
}
 nav li a {
 /* border-bottom: 1px solid #e64949; */
 /* border-right: 1px solid #e64949; */
}
 nav a {
 /* text-align: left; */
 width: 100%;
 /* text-indent: 25px; */
}
}
@media only screen and (max-width: 1468px) {
 nav {
 border-bottom: 0;
}
 nav ul {
 display: none;
 height: auto;
}
 nav a#pull {
 display: block;
 background-color: #a51818;
 width: 100%;
 position: relative;
 text-decoration: none;
 /* text-align: center; */
}
 nav a#pull:after {
content:"";
 background: url('nav-icon.png') no-repeat;
 width: 30px;
 height: 30px;
 display: inline-block;
 position: absolute;
 right: 15px;
 top: 10px;
}
}
@media only screen and (max-width : 320px) {
 nav li {
 display: block;
 float: none;
 width: 100%;
}
 nav li a {
 border-bottom: 1px solid #e64949;
}
}
- Robert.Mo commented on March 20th 20 at 11:57
@Cornell, you don't understand me ...my old version of jquery copy to another file and in it paste your code ...and plug only this file and all - Melisa_Crem commented on March 20th 20 at 12:00
@gabe.Murazik, copy to some other file? And what code to insert. Menu? - Robert.Mo commented on March 20th 20 at 12:03
@Cornell, create a new one for example mmenu.js and copy the contents of your jquery.min.js and your menu code,js and plug already ...mmenu.js you know ? - Melisa_Crem commented on March 20th 20 at 12:06
@gabe.Murazik, now I understand, thanks :) - Robert.Mo commented on March 20th 20 at 12:09
@Cornell, write if it doesn't work - Melisa_Crem commented on March 20th 20 at 12:12
@Cornell, https://codepen.io/topicstarter/pen/YMmWRW look here - Melisa_Crem commented on March 20th 20 at 12:15
@gabe.Murazik, Worked as it should, thank you very much! Best - Robert.Mo commented on March 20th 20 at 12:18
@gabe.Murazikwhat you stop at half measures? I had to copy the jQuery 10 times, each time taking a different version. To honokowai - so tasteful. - dayana81 commented on March 20th 20 at 12:21
@Neha48, he differently did ..I looked in the inspector ... - Melisa_Crem commented on March 20th 20 at 12:24

Find more questions by tags jQuery