onload slideDown 一个 div，slideUp 按钮上的 div 点击 [重复]答案

【问题标题】：onload slideDown of a div, slideUp the div on button click [duplicate]onload slideDown 一个 div，slideUp 按钮上的 div 点击 [重复]
【发布时间】：2018-03-06 16:53:18
【问题描述】：

我正在尝试加载幻灯片。当页面打开时，div 会在 2 秒后自动向下滑动。 div 由响应式图像和一个名为“z-indexed”的按钮组成。现在我需要的是滑动同一个 div。我正在使用下面的代码来做，但不适用于 slideUp。当我单击 z-indexed 按钮时，没有任何反应。

我是 jquery 的初学者，我真的被卡住了。请帮助我，您的努力将不胜感激，谢谢。

<html>
<head>
    <title>slideDown</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
           $("#mydiv").slideUp(1).delay(2000).slideDown('slow');
           $("#mybutton").click(function() {
               $("#mydiv").slideUp();      // i think here's the problem
           });
        });
    </script>
    <style type="text/css">
        img{
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h2>here is some text , you will see an image and a button, after 2 seconds. when you click on the button the div will slideUp.</h2>
    <div id="mydiv">
        <button id="mybutton">z-indexed</button>
        <img src="php.jpg">
    </div>
</body>
</html>

【问题讨论】：

您也需要将 click 事件放入文档中，在您尝试绑定的元素存在于 DOM 之前声明它。
@delinear 谢谢大佬，问题解决了，开始工作了。

标签： jquery html css slidedown slideup

【解决方案1】：

有两个问题：

您忘记了选择器中的井号：$('mybutton').click...
您正试图在点击处理程序存在之前将其附加到它

试试这个：

$(document).ready(function() {
    $("#mydiv").slideUp(1).delay(2000).slideDown('slow');
    $("#mybutton").click(function() {
        $("#mydiv").slideUp();      // i think here's the problem
    });
});

【讨论】：

谢谢大佬，问题解决了，开始工作了。