Question

希望很快，我的Javascript知识很糟糕，我无法解决这个问题。

我有一些Javascript代码可以在点击链接时扩展联系人，但是目前默认情况下联系人是可见的，我希望隐藏它直到点击链接，任何想法？

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

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

.box-content{
    display:none;
}

DEMO2

Answer 2

您还可以在display:none css：

中添加.box-content

.box-content{
    display:none;
}

Answer 3

为什么不在document.ready上使用.hide()

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

Answer 4

在jquery中使用 .hide（）

 $(".box-content ").hide();

在Javascript中默认隐藏Div

4 个答案: