调用子 Div 时，JscrollPane Div 不起作用

Question

在“主”div 上使用 JscrollPane，并将内容放在该 div 内的子 div 中。我使用 jquery show/hide 来加载 onClick 内容，但子 div 不会出现。如果我删除 JscrollPane 它工作正常:(

HTML:

<h3 onclick="internalNav('testTwo')">Click to see Div Two</h3>
       <div id="content" class="scroll-pane">
            <div id="testOne">
                <h1>Title 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
            do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <div id="testTwo">
                <h1>Title 1/h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
            do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>

JS

$(document).ready(function(){

    //Hide all divs, then show first div
    $("#content > div").hide()
    $("#content > div:first").show()

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

});


function internalNav(divId) {

    $("#content > div").not('#' + divId).hide()
    $('#' + divId).fadeIn()


}

我看不出这里出了什么问题！

Answer 1

更改 jScrollPane 内部的内容（或更改该内容的可见性）后，您需要重新初始化 jScrollPane。这是一个示例：

http://jscrollpane.kelvinluck.com/invisibles.html

另外，我请注意，您在 document.ready 块内有一个 $(function() 块。您不需要该附加块 - 您可以直接应用 jScrollPane，因为您已经在 document.ready 块中

作为旁注，在 h3 中使用 onclick 属性不被认为是最佳实践，相反，您可以使用 jQuery 添加事件侦听器。重新初始化并使用更清晰的事件绑定：

$('.internal-nav').bind(
    'click',
    function(e)
    {
        var divId = $(this).attr('rel');
        // Notice no spaces around the ">" - this will help if you have nested divs
        $("#content>div").not('#' + divId).hide(); 
        $('#' + divId).fadeIn(
            function()
            {
                $('.scroll-pane').jScrollPane()
            }
        );

    }
);

将 HTML 中的 h3 替换为：

<h3 class="internal-nav" rel="testTwo">Click to see Div Two</h3>