Question

我想出了如何制作一个切换按钮，隐藏并显示包含内容的div，但是如何在默认情况下隐藏内容并使用切换按钮显示内容

$(function(){
    $('a.toggle').click(function(){
        $('#content').stop().slideToggle(500);
        return false;
    });
});

Answer 1

使用CSS在页面加载期间隐藏内容。

CSS：

#content{
    display:none;
}

的Jquery：

$(function(){
    $('a.toggle').click(function(){
        $('#content').stop().slideToggle(500);
        return false;
    });
});

Answer 2

这是一个新的jsFiddle。

诀窍是在页面加载时隐藏条目。

$(function(){
    // New code
    $("#content").hide();
    $('a.toggle').click(function(){
        $('#content').stop().slideToggle(500);
        return false;
    });
});

另请参阅hide()上的jQuery文档。

此额外jsFiddle中显示的另一种方法是首先在div上设置“display:none;”CSS属性。

<div style="display: none;" id="content">
   <p>Hello</p>
</div>

如果您还想在显示内容时隐藏按钮，我们可以再次使用.hide()功能隐藏按钮。另一个jsFiddle可用。核心代码变为：

$(function(){
    $('a.toggle').click(function(){
        $('#content').stop().slideToggle(500);

        // Start of new code
        $('.toggle').hide();
        // End of new code

        return false;
    });
});

如何让我的div默认折叠？

2 个答案: