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. #boxasを設定し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");
        }
    });
});