如何让我的 div 默认折叠？答案

【问题标题】：How to make my div collapsed by default?如何让我的 div 默认折叠？
【发布时间】：2014-10-31 16:38:55
【问题描述】：

我想出了如何制作一个切换按钮来隐藏和显示带有内容的 div，但是我怎样才能使内容默认隐藏并让切换按钮显示内容

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

【问题讨论】：

使用 css #content{display: none;}

标签： javascript jquery html onclick show-hide

【解决方案1】：

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

CSS：

#content{
    display:none;
}

jQuery:

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

【讨论】：

这是使用hide() 的首选方式。尽可能使用 CSS 替代品。

【解决方案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;
    });
});

【讨论】：

谢谢，你能帮我解决另一个问题吗？无论如何，当你点击切换按钮时，隐藏按钮并显示内容而不是按钮我希望我是clear：当你点击按钮时，它应该隐藏它并显示内容
@common 我不清楚你的意思是“代替按钮”。在您的示例中，这与隐藏按钮不一样吗？你想让你的内容在 DOM 中移动到你的按钮所在的位置吗？或者也许有按钮的文本内容？
@common 你想在显示的内容之间交替显示吗？这样当他们单击按钮时，按钮消失并显示内容？
@Mr.E 是的，这就是我要找的！对不起我的英语，我真的不知道如何解释这一点，当您单击切换按钮时，它应该隐藏并显示内容而不是按钮
啊，明白了！非常感谢您和其他帮助过我的人，希望您周末愉快！