javascript - 设置定时器为slidedown，按钮在slideup后改变

Question

当我浏览网站后，3秒后广告将从网页顶部滑落，并且该div上的按钮名称将更改为“隐藏”，我该怎么写？当我们点击隐藏按钮后，广告会向上滑动，按钮名称又回到“显示”。

向下滑动和向上滑动都可以正常工作，并且按钮 HIDE 和 SHOW 更改成功。但按钮再次变回“SHOW”后。我点击了“显示”按钮，但它不会变回“隐藏”。而且我也没有将计时器设置为向下滑动。因为我不知道该写什么，因为我找不到其他问题的任何答案。

这是我的 JavaScript 和 jQuery 脚本

$(document).ready(function () {
    $(".showAds").click(function () {
    $("#ads").slideToggle("slow");
    $('a#showLink').text('SHOW');
     });
});

这就是我想要显示和隐藏的内容

<div id="top">
    <div id="adsBox">
         <div id="ads"> <img src="assets/images/ads.jpg" alt="ads"> </div>
         <p> <a href="#" id="showLink" class="showAds">HIDE</a> </p>
    </div>
</div>

这是我的 CSS

#adsBox { display:none };

我也尝试过类似的事情。而且它仍然无法正常工作。

$(".showAds").click(function () {
    $("#ads").slideUp("slow");
    $('a#showLink').text('SHOW');
    $("#ads").slideDown("slow");
    $('a#showLink').text('HIDE');
});

我知道我的编码相当困惑。请引导我走向正确的方向。抱歉我的英语不好。谢谢。

Answer 1

按钮标签不会变回原样，因为简而言之，您没有告诉它这样做。您对 slideToggle() 的调用来回切换元素的可见性，但您对 .text("SHOW") 的调用只做了一件事...设置每次都发送短信至“SHOW”。

尝试这样的事情:

$(".showAds").click(function () {
   $("#ads").slideToggle("slow");
   $('a#showLink').text(text == "SHOW" ? "HIDE" : "SHOW");
});

这就是说 - '如果文本是 SHOW，则将其设置为 HIDE。如果没有，请将其设置为 SHOW'。

对于您的计时器，请使用setTimeout():

setTimeout(function(){ $("ads").slideToggle("slow");}, 3000);