jQuery 图片点击隐藏/显示

Question

我在谷歌上搜索了很多关于这个问题的信息，但遗憾的是还没有找到可行的解决方案，遗憾的是我在 javascript 方面没有任何专业知识。

我想实现以下目标：

1. 在网站底部有一个粘性栏（完成），在打开页面 5 秒后自动关闭（未完成）
2. 5 秒后，粘性条应自动向下滑动，并且应该只看到一个橙色箭头（这是一个图像）

我设法实现了一个 jquery 脚本，当我单击按钮时，它已经实现了内容“关闭”。

但我无法设法链接图像以执行与按钮相同的功能，我不知道该怎么做。

加上打开页面后自动关闭 5 秒也没有实现。

jquery 脚本：

 jQuery(document).ready(function(){ jQuery('#hideshow').on('click', function(event) { jQuery('#content').toggle('show'); }); });

这是顶部的工作按钮，它隐藏了“Hello World”，底部是带有白色箭头的橙色图像，它与上面的按钮具有相同的功能，可以直接隐藏其下方的内容。

来自“Hello World”和按钮的代码

带有白色箭头的橙色图像中的代码

带有箭头的图像下方带有橙色背景的内容中的代码

Answer 1

使用 setTimeout() 方法，你可以在这里了解更多所以你可以这样做：

jQuery(document).ready(function(){
    setTimeout(function(){
        jQuery('#content').addClass('hide'); // or toggle using 'show' class
    }, 5000);

    jQuery('#hideshow').on('click', function(event) {        
        jQuery('#content').toggle('show');
    });
});

在带有箭头按钮的代码中使用标签，例如：

<div class="bar">
    <a href="#" id="closeButton" class="arrowBtn"><img src="arrow.png" alt="Arrow button"></a>
</div>

然后你可以使用 jQuery 来监听该按钮上的点击事件：

jQuery('#closeButton').on('click', function(event) {
    event.preventDefault();
    $('#content').toggle('show');
});