Jquery jScrollPane从隐藏的div显示时出现问题

我正在使用作为一种方式，形成我自己的自定义滚动条，我都得到了它的工作，但当然有一个小问题，阻碍我完成该项目

当我把container div和scroll pane div（保存内容的）放在站点的某个地方时，它工作得很好，但是我需要将滚动条放在一个开始隐藏的div中。但当用户单击以显示div时，它确实显示div，但滚动窗格div保持隐藏。现在我读到我需要使用重新初始化，但我不知道在哪里放置它

我使用这个jquerycode来隐藏div

// Begin Toggle Hide functie off the extended update view
    jQuery('.social_media_updates_extended_view').hide();

这一部分使我能够在不同的div之间切换

        jQuery(".update_extend span").css('cursor', 'pointer').click(function() {
            var $this = $(this);
            $('.social_media_updates_extended_view_arrow').not($this.next("div")).fadeOut(200);
            $this.next("div").fadeToggle(200);
        });

            var $container = $(".wrapper_update");
                $container.delegate(".update_extend .btnFadeIn", "click", function(event) {
                    var $view = $(this).closest(".wrapper_update").find(".social_media_updates_extended_view").fadeToggle(200);

                    $container.find(".social_media_updates_extended_view").not($view).fadeOut(200);
            })
// End Toggle Hide functie off the extended update view.

这是我用来调用滚动条的部分

// Begin Custom Scroll in Div
    jQuery(function(){
        jQuery('.scroll-pane').jScrollPane(
            {reinitialise: true}
        );
    });

试试这个

jQuery(".update_extend span").css('cursor', 'pointer').click(function() {
            var $this = $(this);
            $('.social_media_updates_extended_view_arrow')
            .not($this.next("div")).fadeOut(200);
            $this.next("div").fadeToggle(200);
});

var $container = $(".wrapper_update");
$container.delegate(".update_extend .btnFadeIn", "click", function(event){
   var $view = $(this).closest(".wrapper_update")
               .find(".social_media_updates_extended_view")
               .fadeToggle(200, function(){

                     //Here we should check if the container is visible
                     //then reinitialise it
                     if($(this).is(':visible')){
                         jQuery('.scroll-pane').jScrollPane(
                                {reinitialise: true}
                         );
                      }


                });

    $container.find(".social_media_updates_extended_view")
    .not($view).fadeOut(200);
});

---

添加自动重新初始化：true

$(function(){
    $('.scroll-pane').jScrollPane({autoReinitialise: true});
});

---

嘿@Shankarsangli感谢您的快速响应，但sadley这对情况没有帮助。我猜这是因为（this）元素，因为这并不意味着当前隐藏的div。此外，隐藏div（.social\u media\u updates\u extended\u view）的状态更改为display:block，当它处于活动状态而不是display:visible时，我在代码if（$（this）.is（':visible'）{中更改为if（$（this）.is（':block'）{，但这也没有帮助。@Peter-FYI

$（this）.is（':visible'））

是检查元素是否可见的方法。看看这个，感谢您对它的深入了解，但您仍然能想到它不能正常工作的原因吗？您想在哪个元素上应用

jScrollPane

插件？我用用于此项目的div元素制作了一个小jsFiddle:jsFiddle.net/ZbtBW/1显然，这种方法是有效的，因为它不使用jScrollPane插件。