javascript - 如何使单击一次超链接时出现 div 并在第二次单击超链接时消失？这可以重复吗？

Question

我正在寻找一种方法，让用户单击超链接后出现一个 div，然后当用户再次单击它时让相同的 div 消失。目前，用户只能在按下超链接时让 div 出现，但是当您再次单击超链接时，div 仍然在它的“显示: block ”中；状态。这就是我的意思:

HTML

<a onclick="showDiv()" id="ShowAboutButton">What's This?</a>

<div id="About">

</div>

CSS

#ShowAboutButton {

    text-align: center;

    margin-top: 40px;

    background-color: white;

    border: none;

    cursor: pointer;

    font-family: "Lato Light";

    font-size: 22px;

}

#About {

    width: 900px;

    height: 600px;

    margin-left: auto;

    margin-right: auto;

    margin-top: 10px;

    background-color: gray;

    display: none;

    transition: height 2s;

}

Javascript

function showDiv() {

document.getElementById('About').style.display = "block";

}    

如果可能的话，有人可以告诉我如何让用户能够单击超链接并让 div 滑入并带有过渡效果，然后再次单击超链接时将其滑回有过渡效果？任何帮助将非常感激!提前致谢!

Answer 1

您可以使用 jquery slideToggle 轻松完成此操作:

$("#ShowAboutButton").click(function(){

    $("#About").slideToggle();

});

JSFIDDLE