Question

我只是想学习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的新手，所以有人能告诉我怎么能这样做？

感谢您的支持。

Answer 1

将第一个切换更改为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>

Answer 2

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

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

这是一个JSFiddle：

http://jsfiddle.net/6TLaw/

Answer 3

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

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

Answer 4

试试这个：

<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>

如何更改jquery切换的默认效果..？

4 个答案: