1

在“主”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()


}

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

4

1 回答 1

0

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

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

另外，我注意到您在$(function()块内有一个document.ready块。你不需要那个额外的块 - 你可以直接应用 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>
于 2011-02-25T10:50:31.180 回答