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()
})

演示：Fiddle

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);
        });
    });

使用javascript折叠标题内容

2 个答案: