Question

在“master”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。这是一个例子：

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>

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

1 个答案: