Как совместить две библиотеки jquery?

Question

[Иван Вагнер]

Здравствуйте тостеры! Возникла проблема, конфликтуют две библиотеки JQuery 1.6.1.min и 3.2.1.min. От одной работает слайдер, от другой меню. Собственно при подключении сразу двух работает только 1.6.1 и вместе с ней работает слайдер, как только отключаю 1.6.1 и оставляю 3.2.1, начинает работать меню, слайдер выключается.

Собственно JS меню:

$(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');
  }
});

Подключаю так:

<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>

Comments

[Moskus]

Найти слайдер, которому не миллион лет.

[Иван Вагнер]

Moskus, к blueberry слайдеру уже привыкший..

[Moskus]

Иван Вагнер, реальность с вашими привычками считаться не горит желанием.

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/YMmWRW дальше нету исходных данных , вот так добавьте ваш html а то не ясно что должно быть menu.slideToggle();

Comments

[Иван Вагнер]

Именно оно! Большое Вам спасибо.

[Максим]

Иван Вагнер, бывает ...

[Иван Вагнер]

Максим Ленский, теперь меню моментально схлопывается после открытия с мобильного ka4ok-nutrition.ru

[Максим]

Иван Вагнер, в смысле работает ?

[Иван Вагнер]

Максим Ленский, я поменял JS Blueberry на тот, что привели в примере вы и строки

<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>

Заменил на

<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>

После открытия меню с мобильного, оно моментально схлопывается.

[Максим]

Иван Вагнер, сделай не slideToggle а toggleClass();

[Максим]

Иван Вагнер, но можно ещё по другому ... открой jquery.min.js и скопируй весь код в main.js и в него же вставь код

$(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');
  }
});

можно попробывать так

[Иван Вагнер]

Максим Ленский, слайдер и до этого работал. Я говорю про адаптивное меню сайта. После того, как место 3.2.1 поставил 3.4.1 версию начались траблы. При открытии меню оно моментально схлопывается.

<nav class="clearfix">
  <ul class="clearfix">
	 	 <li><a href="/prot.html" target="buy">Протеин</a></li>
		 <li><a href="/bcaa.html" target="buy">BCAA</a></li>
		 <li><a href="/gainer.html" target="buy">Гейнеры</a></li>
		 <li><a href="/carnit.html" target="buy">L-Carnitine</a></li>
		 <li><a href="/omega3.html" target="buy">Omega 3</a></li>
		 <li><a href="/testobust.html" target="buy">Тесто-бустеры</a></li>
		 <li><a href="/shakers.html" target="buy">Шейкеры</a>	 </li>
	 	 <li><a href="/sust.html" target="buy">Суставы</a></li>
		 <li><a href="/creat.html" target="buy">Креатин</a></li>
		 <li><a href="/jir.html" target="buy">Жиросжигатели</a></li>
		 <li><a href="/prework.html" target="buy">Предтрены</a></li>
		 <li><a href="/vitam.html" target="buy">Витамины</a></li>
		 <li><a href="/ingib.html" target="buy">Ингибиторы</a></li>
		 <li><a href="/vkusniahi.html" target="buy">Вкусняхи</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;
  }
}

[Максим]

Иван Вагнер, ты не понял меня ...свою старую версию jquery скопируй в другой файл и в него же вставь твой код ...и подключи только этот файл и всё

[Иван Вагнер]

Максим Ленский, скопировать в какой другой файл? И какой код вставить. Меню?

[Максим]

Иван Вагнер, создай новый к примеру mmenu.js и в него скопируй содержимое твоего jquery.min.js и код твоего menu,js и подключи уже его ...mmenu.js понимаешь ?

[Иван Вагнер]

Максим Ленский, вот теперь понимаю, спасибо :)

[Максим]

Иван Вагнер, напиши если не получится

[Максим]

Иван Вагнер, https://codepen.io/topicstarter/pen/YMmWRW вот смотри

[Иван Вагнер]

Максим Ленский, Заработало как надо, большое спасибо! Лучший

[Stalker_RED]

Максим Ленский, чего вы на полумерах останавливаетесь? надо было скопировать jQuery 10 раз, причем каждый раз брать другую версию. Говнокодить - так со вкусом.

[Максим]

Stalker_RED, он по другому сделал ..я посмотрел в инспекторе ...