Question

我有一个功能，当你点击关闭它时它会起作用：它会向上滑动。但是，我希望它在您第一次进入页面时默认下滑。它现在只是出现，而不是滑落。

$(document).ready(function () {
    $("#related2").slideDown();

    $(".close2").click(function (event) {
        event.preventDefault();
        $("#related2").slideUp();
    });
});

Answer 1

我不知道这是否有多大帮助，但我用它来做类似于你所说的事情。

$(document).ready(function()
{
  //shows the all of the elements
  $(".viewSectionBody").show();

  //toggle the body on head click
  $(".viewSectionHead").live('click', function()
  {
    $(this).next(".viewSectionBody").slideToggle(600);
  });
});

Answer 2

只要您将#related元素的样式设置为display:none，您的代码就可以正常工作。这样，它可以在元素到达ready（）代码时为元素的显示设置动画。

Answer 3

如果我理解正确，你发布的代码已经做了你想要的，你想详细了解发生了什么，是吗？

所以：

$(document).ready(function() {
...
}

这意味着当页面加载完毕后，应该执行附带的代码（括号内）。

$("#related2").slideDown();

这使得所选元素使用slideDown效果显示。因为这是在（文档）.ready中，所以一旦页面完成加载就会发生这种情况，并且可能在此之前隐藏了元素（使用CSS）。

$(".close2").click(function(event) {  
...     
});

这会将所有带有类“.close2”的元素附加到click事件中，因此只要单击这些元素，就会执行附带的代码。同样，由于它位于（document）.ready块内，因此只要页面完成加载，就会附加此click事件。

event.preventDefault();

这使得如果元素已经附加了默认事件，则不执行它（例如，链接 - - 已经附加了点击事件，因此当单击它时，浏览器将被带到URL上href）。在这种情况下，此方法的行为将取决于元素是否实际附加了click事件。它可能什么都不做。

$("#related2").slideUp();

向上滑动所选元素。

编辑：好的，刚刚注意到您对原始帖子的评论。默认情况下，它不会向下滑动，因为默认情况下不会隐藏元素，这是必需的，因为slideDown方法实际上只是“取消隐藏”而元素使用花哨效果。所以你必须使用CSS隐藏＃related2，或者在HTML上隐藏内联样式。这转化为：

#related2 { display: none; }

CSS上的

或：

<div id="#related2" style="display:none;"></div>

在HTML上（当然，我假设元素是div）。

.slideDown函数对document.ready不起作用

3 个答案: