Question

我正在使用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.
  }); 
});

Answer 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.
  }); 
});

向PanelSnap面板添加“活动”类

1 个答案: