使用 jquery live 更新滚动条

Question

我正在开发一个网页，它使用折叠 div 元素来扩展和收缩每个标题的内容。我还使用了一个自定义滚动条，每当发生展开或收缩事件时都需要更新该滚动条。 到目前为止，我想出的解决方案是使用 jquery 的 live，如下所示：

jQuery('#accordion_sp1_id139').live('click',function(){ myScrollBar.update();});

所以基本上我告诉它在主手风琴 div 内发生点击事件时更新滚动条。

我的问题是，第一次在该 div 内单击任何内容时这不起作用，但它适用于任何后续点击。无论如何，有没有办法让它在第一次点击时也能工作。

这是出现问题的页面：https://www.arrowandbranch.com/media/press 我使用的滚动条是取自 http://www.baijs.nl/tinyscrollbar/ 的 jquery 插件

Answer 1

我相信这里发生的事情是您的 Accordion 容器的点击事件直接触发在单击事件启动手风琴动画之后但在容器展开之前。您需要将 myScrollBar.update() 调用设置为在 Accordion 动画完成后进行，这在 MooTools Docs - Fx/Fx.Accordion （尽管一开始并不十分突出）

在您的 Accordion 脚本中添加用于运行滚动条更新的 onComplete: 设置...

var myAccordion139 = new Accordion(document.getElements('#accordion_sp1_id139 .toggler'), document.getElements('#accordion_sp1_id139 .sp-accordion-inner'), {
    opacity: true,
            display:-1,
            alwaysHide: true,       
    onActive: function(toggler){
        toggler.addClass('active');
    },
    onBackground: function(toggler){
        toggler.removeClass('active');
    },
    onComplete: function(toggler) {
        myScrollBar.update();
    }
});

Answer 2

一个简单的解决方案是更新手风琴打开事件的处理程序中的滚动条。在查看您的代码时，如果您要在“press”页面上编写如下所示的 JavaScript：

    onActive: function(toggler){
      toggler.addClass('active');
      myScrollBar.update();
    },

我的猜测是它会起作用，假设 myScrollBar 变量在该函数的范围内。