隐藏div准备好了

Question

当下载页面时，此隐藏/显示脚本当前将div加载为可见。我在脚本中更改了什么，以便#box div开始隐藏？

$(document).ready(function () {
var hidden = false;
$('.arrow').click(function () {
    if (hidden) {
        hidden = false;
        $('#box').slideDown("slow");
    } else {
        hidden = true;
        $('#box').slideUp("slow");
    }
});
});

Answer 1

<强> jsFiddle Demo

使用jQuery＆＃39; s hide。它会将#box设置为display:none。当点击发生时，slide功能仍然有效。

$(document).ready(function () {
 $('#box').hide();//use this
 var hidden = true;
 $('.arrow').click(function () {
  if (hidden) {
    hidden = false;
    $('#box').slideDown("slow");
  } else {
    hidden = true;
    $('#box').slideUp("slow");
  }
 });
});

或者，正如@undefined指出的那样，您可以像这样使用slideToggle：

<强> jsfiddle Demo

$('#box').hide();//use this
$('.arrow').click(function () {
 $('#box').slideToggle("slow");
});

Answer 2

试试这个

$(document).ready(function () {
    $('#box').hide();
    var hidden = true;
    $('.arrow').click(function () {
        if (hidden) {
            hidden = false;
            $('#box').slideDown("slow");
        } else {
            hidden = true;
            $('#box').slideUp("slow");
        }
    });
});