javascript - 准备好隐藏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 的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");
        }
    });
});