Question

我有this代码，当＆＃39; A＆＃39;单击，额外的内容下降。但是，我希望额外的内容开始隐藏。我该怎么做？

以下是代码：

HTML：

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

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

    </header>
    <div class="box-content active">
        Content</div>
</section>

使用Javascript：

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

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

使用这种方式。替换你的代码：

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

以下内容：

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

更改的原因是，如果您有多个.box-head，那么它会触发所有内容的幻灯片而不只是一个。

Answer 2

默认情况下，在CSS中将.box-content元素设置为display: none：

.box-content {
    display: none;
}

Updated fiddle

使可扩展div开始关闭

2 个答案: