滑動動畫負載模板

Question

HTML：

<button id='btn'>Click</button> 

main.html中：

<div id="main"><p>Hai I am Main..</p></div> 

Sub.html

<div id="sub"><p>Hai I am sub..</p></div> 

JS：

$(document).on("click", "btn", function(e) { 
      e.preventDefault(); 

      var toggler = $('#main'), 
       wrapper = toggler.find('#sub'); 

      if(wrapper.length==0){ 
       toggler.load("sub.html"); 
      } 
      else{ 
       toggler.load("main.html"); 
      } 

     }); 

模板加載工作正常，試圖在模板加載時將滑動事件添加到模板中。我試過$toggler.load("sub.html").slideUp()

該模板應該加載在按鈕上的動畫幻燈片再次點擊按鈕時它應該向下滑動。我怎樣才能做到這一點？

Answer 1

$(document).on("click", "#btn", function(e) { 
      e.preventDefault(); 
      var toggler = $('#main'), 
       wrapper = toggler.find('#sub'); 
      if(wrapper.length==0){ 
       toggler.load("sub.html").slideToggle(); 
      } 
      else{ 
       toggler.load("main.html").slideToggle(); 
      } 
}); 

演示：

http://jsfiddle.net/y9avm/