2

我只是想学习 jQuery，但发现了一个问题。我有一个切换效果，我可以通过它隐藏和显示我的 div。代码如下：

<script type="text/javascript">
    $(document).ready(function(){
        $("#butShowHideSlow").click(function () {
            $("#divShowHideSlow").toggle("slow");
        });
    });
</script>

<button id="butShowHideSlow">Click Me</button>
<div style="width: 300px; height: 47px; border: solid 1px black; background-color: white; text-align: center;" id="divShowHideSlow">Div that hide and show slowly</div>

最初我div在那里，但我想最初隐藏我的 div。我认为这很容易，但我是 jQuery 新手，所以谁能告诉我该怎么做？

谢谢你的支持。

4

4 回答 4

2

将第一个切换更改为hide()

<script type="text/javascript">
 $(document).ready(function(){
  $("#divShowHideSlow").hide();
  $("#butShowHideSlow").click(function () {
   $("#divShowHideSlow").toggle("slow");
  });
 });
</script>
<button id="butShowHideSlow">Click Me</button>
<div style="width:300px;height:47px; border: solid 1px black;background-color:white;text-align:center;" id="divShowHideSlow">Div that hide and show slowly</div>
于 2012-08-09T10:59:27.997 回答
1

您可以将此行添加到脚本的顶部：

$("#divShowHideSlow").hide();

这是一个JSFiddle：

http://jsfiddle.net/6TLaw/

于 2012-08-09T10:58:56.380 回答
1

$("#divShowHideSlow").hide();

或者添加display:none到 div 样式属性。

于 2012-08-09T10:59:44.127 回答
1

尝试这个：

<script type="text/javascript">
$(document).ready(function(){
  $("#butShowHideSlow").click(function () {
    $("#divShowHideSlow").toggle("slow");
  });
});
</script>

<button id="butShowHideSlow">Click Me</button>
<div style="display: none; width:300px;height:47px; border: solid 1px black;background-color:white;text-align:center;" id="divShowHideSlow">Div that hide and show slowly</div>
于 2012-08-09T11:00:50.303 回答