Slick Slider, sledeUp() и slideToggle() - конфликт?
Здравствуйте! Столкнулась с проблемой: на сайте подключен slick slider. Делаю спойлер.
$('.spoiler__title').click(function(event){ if($('.spoiler').hasClass('one')){ $('.spoiler__title').not($(this)).removeClass('active'); $('.spoiler__text').not($(this).next()).slideUp(300); } $(this).toggleClass('active').next().slideToggle(300); }) Спойлер не работает. Консоль выдаёт ошибку "Uncaught TypeError: $(...).not(...).slideUp is not a function" Если отключить slick slider - всё работает. То есть, я так понимаю, что тут конфликт. Подскажите, пожалуйста, можно ли его как-то разрешить, не отключая slick slider? P.S. Если заменить slideUp() и slideToggle() на show() и hide(), то работает и со slick slider, но некрасиво. |
$('.spoiler__title').click(function(event){
тут $(this) это и есть $('.spoiler__title') Следовательно что такое будет $('.spoiler__title').not($(this))? |
Удаляю класс 'active' у всех элементов, кроме одного (чтобы при открывании одного блока, другой закрывался).
Вы считаете, это как-то влияет на конфликт, описанный в вопросе? |
Цитата:
$('.spoiler__title').not($(this)).removeClass('act ive'); $('.spoiler__text').not($(this).next()).slideUp(30 0); } $(this).toggleClass('active').next().slideToggle(3 00); }) И выполните вот такое: $('.spoiler__title').click(function(event){ console.log($('.spoiler__title').not(this)) }) Что в консоли наблюдается? Или $('.spoiler__title') это у вас коллекция? |
Ничего.
|
Если $('.spoiler__title'), это коллекция, то $('.spoiler__title').not(this), это удалить из нее источник события с этим же классом из этой коллекции (просто this не надо тут получать JQ объект). То есть все верно тогда. Но как тогда объяснить это:
$('.spoiler__text').not($(this)), это что за коллекция и какое отношение к ней имеет $('.spoiler__text')? PS. Кстати, тогда лучше так: var name = $('.spoiler__title').click(function(event){ //а тут не $('.spoiler__title').not($(this)), а name.not(this).... зачем постоянно получать коллекцию. |
Может быть, так понятнее будет.
<div class="spoiler one"> <div class="spoiler__item"> <div class="spoiler__title">Заголовок</div> <div class="spoiler__text">Далеко-далеко за словесными горами в стране гласных и согласных живут.</div> </div> <div class="spoiler__item"> <div class="spoiler__title">Заголовок</div> <div class="spoiler__text">Далеко-далеко за словесными горами в стране гласных и согласных живут.</div> </div> <div class="spoiler__item"> <div class="spoiler__title">Заголовок</div> <div class="spoiler__text">Далеко-далеко за словесными горами в стране гласных и согласных живут.</div> </div> <div class="spoiler__item"> <div class="spoiler__title">Заголовок</div> <div class="spoiler__text">Далеко-далеко за словесными горами в стране гласных и согласных живут.</div> </div> </div> |
Тогда вот это
$('.spoiler__title').not($(this)).removeClass('act ive'); $('.spoiler__text').not($(this).next()).slideUp(30 0); можно заменить на: spl.hot(this).removeClass('active').siblings().slideUp(300) где spl = var spl = $('.spoiler__title').click...., иначе так заумно, что не понять что к чему. ) Что за проблема со слайдером сказать не могу, может к документации обратиться? |
К документации обращалась (может, плохо обращалась, конечно). Ничего там не нашла по своему вопросу.
В любом случае, спасибо, что потратили своё время) |
$(...).not(...).slideUp is not a function - означает, что нет объекта/объектов, и применить к ним функцию нельзя.
|
Часовой пояс GMT +3, время: 04:30. |