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, время: 02:17. |