jquery - 在 Javascript 中默认隐藏 Div

Question

希望只是一个快速的，我的 Javascript 知识很差，我无法解决这个问题。

我有一些 Javascript 代码可以在单击链接时展开联系人，但是目前默认情况下联系人是可见的，我希望在单击链接之前隐藏它，有什么想法吗？

jsfiddle 是:http://jsfiddle.net/p7Ebh/

js

$("a.box-toggle").on('click', function () {
    $('div.box-content').slideToggle(200).toggleClass('active');
});

html

<section class="box2">
<header class="box-head">
    <div class="box-title fr"> <span class="box-icon"></span>

            <h3 class="box-title-text">Title Title</h3>

    </div>  <a class="box-toggle fl active" href="#">A</a>

</header>
<div class="box-content active">
    <img src="http://carryingthegun.files.wordpress.com/2012/09/personal_trollface_hd.png" alt="" width="200" height="200" />Content or collapsing data goes here</div>
</section>

CSS

.widget-toggle {
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    width: 18px;
    height: 9px;
    margin-top: 15px;
    margin-left: 13px;
    background: url(../img/sidebar-arrows.png) no-repeat 0 -18px;
}
.widget-toggle.active {
    background: url(../img/sidebar-arrows.png) no-repeat 0 0;
}

提前致谢!

Answer 1

使用 .hide() 可以在加载页面时使 div 内容不可见，只有在用户单击链接时才会出现。
试试这个:

    $('div.box-content').hide();    
    $("a.box-toggle").on('click', function () {
        $('div.box-content').slideToggle(200).toggleClass('active');
    });

DEMO1

另一种解决方案是在 jQuery 中只使用 CSS 而不使用 .hide()，如下所示:

.box-content{
    display:none;
}

DEMO2