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').click(function(event){
if($('.spoiler').hasClass('one')){
$('.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 - означает, что нет объекта/объектов, и применить к ним функцию нельзя.

В общем, я проект собираю с помощью Gulp. И библиотеки были собраны в один файл и минифицированы. Видимо, так не стоит делать, потому что, если подключить отдельно jQuery и отдельно Slick Slider, то всё прекрасно работает без ошибок.

<div class="spoiler one">
    <div class="spoiler__item">
        <div class="spoiler__title">Head 1</div>
        <div class="spoiler__text">Text 1</div>
    </div>
    <div class="spoiler__item">
        <div class="spoiler__title">Head 2</div>
        <div class="spoiler__text">Text 2</div>
    </div>
    <div class="spoiler__item">
        <div class="spoiler__title">Head 3</div>
        <div class="spoiler__text">Text 3</div>
    </div>
    <div class="spoiler__item">
        <div class="spoiler__title">Head 4</div>
        <div class="spoiler__text">Text 4</div>
    </div>
</div>

и код:

var spl = $('.spoiler__title').click(function() {
    console.log(spl.not(this).siblings())
    spl.not(this).siblings().slideUp();
})

В консоли всегда будет массив из элементов spoiler__text за исключением соседнего с текущим spoiler__title, и код spl.not(this).siblings().slideUp() выполнится без проблем. У вас же тут ошибка - проверьте, что у вас в консоли.

В консоли массив из элементов spoiler__text за исключением соседнего с текущим spoiler__title
И ошибка Uncaught TypeError: r.not(...).siblings(...).slideUp is not a function

r.not(...).siblings(...) именно так?

<html>
<head>
</head>
<body>
<div class="spoiler one">
    <div class="spoiler__item">
        <div class="spoiler__title">Head 1</div>
        <div class="spoiler__text">Text 1</div>
    </div>
    <div class="spoiler__item">
        <div class="spoiler__title">Head 2</div>
        <div class="spoiler__text">Text 2</div>
    </div>
    <div class="spoiler__item">
        <div class="spoiler__title">Head 3</div>
        <div class="spoiler__text">Text 3</div>
    </div>
    <div class="spoiler__item">
        <div class="spoiler__title">Head 4</div>
        <div class="spoiler__text">Text 4</div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var spl = $('.spoiler__title').click(function() {
    spl.not(this).siblings().slideUp();
})
</script>
</body>
</html>

То есть нет ошибок, ошибка может возникать если spl.not(this).siblin() возвращает null или не jq-объект. Второе исключено, ибо spl. и далее по цепочке возвращает jq-объект. Конфликт с библиотекой... тогда у вас $('.spoiler__title').click.. уже была бы ошибка.

Да

Значит ищите ошибку в своем коде, у вас, видимо, на странице уже сжатый код, ибо с чего вдруг появилась r.

А если в коде даже удалить все элементы spoiler__text, то ошибки не будет, просто не будет выполняться функция slideUp(), ибо коллекция будет пуста. А у вас получается что нет вообще объектов, тогда и в консоли вы их не должны видеть. Что-то с чем-то не стыкуется у вас или в ваших ответах.

Может, если код сжимается, где-то в нем возникает ошибка.

Да. Мне тоже так кажется.
Еще раз спасибо.

А самой библиотекой нет проблем? Другие функции то выполняются, судя по вашим словам.

Да. Всё выполняется.
И даже спойлер работает, если вместо slideUp() и slideToggle() show() и hide() написать.
А вот fadeIn() / fadeOut(), кстати, выдаёт такую же ошибку.

Тогда это не те ошибки, о которых предположение, то есть ссылки на нечто не потребное, к чему нельзя применить. Проверьте что еще подключается со слайдером. Подключите другую JQ и проверьте.

Спасибо! Помогло.

Ну вот, как всегда, лечили больного от плоскостопия, лечили, а он помер от другого диагноза, от насморка. )