javascript - 带有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

你可以很容易地实现一个

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

演示：小提琴

Answer 2

您可能正在寻找slideToggle. 此功能将在上下滑动内容之间切换。

尝试这个

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

500是动画的速度。

您还可以定位要隐藏和显示的对象。要么给它一个 ID、类，要么用 jQuery 专门定位它。在这里，当您单击任何具有 类的东西时collapsible，下一个div将隐藏和显示。

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

如果您需要在再次单击时停止动画以防止出现跳跃效果，请.stop(true)在效果之前添加

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