JScrollPane 插件 - 折叠时重新初始化答案

【问题标题】：JScrollPane Plugin - Reinitialize on CollapseJScrollPane 插件 - 折叠时重新初始化
【发布时间】：2012-09-21 16:41:29
【问题描述】：

我正在尝试让 JScrollPane 在展开/折叠我的手风琴时重新初始化here。您可以通过单击其中一个父项（Stone Tiles、Stone Sinks、Stone Wall Clading 等）来演示手风琴。

现在我使用以下 JQuery 将其设置为单击事件...

var pane = $('.menuwrap')
pane.jScrollPane();
var api = pane.data('jsp');
var i = 1;

$("ul#widget-collapscat-5-top > li.collapsing").click(function() {
    $(this).delay(3000);
    api.reinitialise();
});

当您第二次单击父级时，它似乎有效，但不是第一次。我不知道为什么，但我开始尝试编辑手风琴的 JS，以便在折叠完成时添加此功能（而不是尝试执行此单击解决方法）。折叠JS可以查看here。

我尝试在此处添加重新初始化函数的 JS，但我认为我没有正确地做某事。

你能指出我正确的方向吗？

谢谢！

【问题讨论】：

标签： javascript jquery wordpress accordion jscrollpane

【解决方案1】：

api.reinitialise() 工作正常。发生的事情是当您单击时它会更新大小，而此时元素尚未展开。您可能会注意到，如果您再次展开、折叠和展开同一部分，则不会发生任何事情。但是，如果您展开一个然后单击另一个，则 ScrollPane 将调整为第一个展开元素的大小。

您可以通过事件解决此问题：在崩溃结束时放置$(this).trigger('colapseComplete')。然后你可以使用：

//Listening to the colapseComplete event we triggered above
$("#widget-collapscat-5-top > li.collapsing").on('colapseComplete', function() {
  api.reinitialise();
});

【讨论】：

【解决方案2】：

也许您可以更改 addExpandCollapse 函数，以通过这种方式在每个点击操作结束时调用 reinitialise 函数：

function addExpandCollapse(id, expandSym, collapseSym, accordion) {
  jQuery('#' + id + ' .expand').live('click', function() {
    if (accordion==1) {
      var theDiv = jQuery(this).parent().parent().find('span.collapse').parent().find('div');
      jQuery(theDiv).hide('normal');
      jQuery(this).parent().parent().find('span.collapse').removeClass('collapse').addClass('expand');
        createCookie(theDiv.attr('id'), 0, 7);
    }
    jQuery('#' + id + ' .expand .sym').html(expandSym);
    expandCat(this, expandSym, collapseSym);

    api.reinitialise(); // HERE

    return false;
  });
  jQuery('#' + id + ' .collapse').live('click', function() {
    collapseCat(this, expandSym, collapseSym);

    api.reinitialise(); // and HERE

    return false;
  });
}

为了更安全，请确保在文件中的上述代码之前有var api = pane.data('jsp'); 行。

【讨论】：