可摺疊頭內容與JavaScript

Question

我奮力編寫相應的JavaScript摺疊和展開我的內容

查看：

<div> 
    <h3 id="roleHeader" class="roleHeader collapsible">Title</h3> 
    <div>Content to display to users</div> 
</div> 

的javascript：

$(document).ready(function() { 
      //collapsible management 
      $('.collapsible').collapsible({ 
      }); 
     }); 

Answer 1

你可能正在尋找slideToggle。此功能將在上下滑動內容之間切換。

試試這個

$(document).ready(function() { 
     $('.collapsible').click(function(){ 
      $(this).slideToggle(500); 
     }); 
    }); 

500是動畫的速度。

您還可以定位您想要隱藏和顯示的對象。要麼給它一個Id，class，要麼專門用jQuery來定位它。在這裏，當你點擊任何類別爲collapsible的東西時，下一個div將隱藏並顯示。

$(document).ready(function() { 
     $(".collapsible").click(function(){ 
      $(this).next("div").slideToggle(500); 
     }); 
    }); 

如果需要動畫停止，當你再次點擊它，以防止跳躍效果，效果

$(document).ready(function() { 
     $(".collapsible").click(function(){ 
      $(this).next("div").stop(true).slideToggle(500); 
     }); 
    }); 

Answer 2

您可以實現一個非常容易

jQuery(function($){ 
    $('.collapsible').click(function(){ 
     $(this).next().stop(true, true).slideToggle(); 
    }).next().hide() 
}) 

前加 .stop(true)

演示：Fiddle