Добавить «активный» класс на панель PanelSnap
Я использую https://panelsnap.com. Мне нужно добавить класс active на текущую панель.
Я заставил плагин работать с некоторыми пользовательскими параметрами, но я не могу заставить работать обратные вызовы. Думаю, мне следует использовать функцию addClass() для обратного вызова snapStart, но я могу делать что-то не так. Вот такой должна быть структура:
on([string] eventName, [function] callbackFunction(panel))
Это мой рабочий код без добавления класса
document.addEventListener("DOMContentLoaded", function() {
var options = {
container: document.body,
panelSelector: '.snapp',
directionThreshold: 100,
delay: 0,
duration: 300,
};
new PanelSnap(options);
});
[РЕДАКТИРОВАТЬ]
Ваш код работает, но не с $(this), вместо этого, если я добавлю селектор класса, он будет применяться ко всем элементам. Есть ли способ сделать это, например, с помощью each?
Мой новый код
document.addEventListener("DOMContentLoaded", function() {
var options = {
container: document.body,
panelSelector: '.snapp',
directionThreshold: 100,
delay: 0,
duration: 300,
};
var psInstance = new PanelSnap(options);
psInstance.on('snapStart', function() {
$('.snapp').removeClass('active'); // remove the class from all other panels
});
psInstance.on('snapStop', function() {
$('.snapp').addClass('active'); // add the class to the current panel.
});
});
Ответы 1
Из документации вам нужно подключиться к событию snapStart в экземпляре PanelSnap(), который вы создаете, чтобы добавить класс. Попробуй это:
document.addEventListener("DOMContentLoaded", function() {
var options = {
container: document.body,
panelSelector: '.snapp',
directionThreshold: 100,
delay: 0,
duration: 300,
};
var psInstance = new PanelSnap(options);
psInstance.on('snapStart', function(panel) {
$('.snapp').removeClass('active'); // remove the class from all other panels
$(panel).addClass('active'); // add the class to the current panel.
});
});
Извините, я неправильно прочитал документацию. Хотя обратный вызов выполняется в рамках активной панели, но вместо этого он передается как параметр. Я обновил ответ для вас
Спасибо @rory-mccrossan Обратный вызов работает отлично, но все еще есть некоторые проблемы. Я снова отредактировал свой вопрос.