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

Использование 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()


}

Я не вижу, что здесь не так!


jquery jscrollpane jquery-jscrollpane
person Richard    schedule 23.02.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам необходимо повторно инициализировать 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>
person vitch    schedule 25.02.2011