當子div被調用時，JscrollPane Div不起作用

Question

在「主」div上使用JscrollPane，並在該div內的子div中包含內容。我正在使用jQuery的顯示/隱藏來加載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中的內容（或更改該內容的可見性）後重新初始化jScrollPane N實施例：

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

另外，我注意到你有一個document.ready塊內$(function()塊。您不需要額外的塊 - 您可以直接應用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>