1

「マスター」divでJscrollPaneを使用し、そのdiv内の子divにコンテンツを配置します。jqueryのshow/hiddenを使用してコンテンツ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。追加のブロックは必要ありません。既にdocument.readyブロック内にいるため、jScrollPane を直接適用できます。

補足として、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 に答える