javascript - 如何让项目默认隐藏然后用 jquery 按钮显示？

Question

我希望在页面加载时隐藏带有各种屏幕截图的

，然后单击带有切换功能的按钮后显示它们。但是，当页面加载时，它们是默认显示的，如何更改？谢谢。

HTML:

<button>Screenshots</button>
    <p id="hide">Pretent these are some images yo.</p>

JavaScript:

$(document).ready(function(){
  $("button").click(function(){
    $("#hide").toggle('slow');
  });
});

Answer 1

您可以在 CSS 中为元素指定 display: none 声明。在您点击事件时，您可以给它 display: block，以显示自己。

CSS:

#hide {
    display: none;
}

JavaScript:

  $("button").click(function(){
    $("#hide").css('display', 'block');
  });

Working Fiddle