JscrollPane Div не работает, когда вызываются дочерние элементы Div

Question

Использование JscrollPane в "главном" div, а также содержимое в дочерних 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 блок

Как примечание, использование атрибута onclick в вашем h3 не считается лучшей практикой. Вместо этого вы можете добавить прослушиватель событий с помощью 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()
            }
        );

    }
);

С заменой h3 из вашего HTML на:

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