如何使div在一次單擊超鏈接時出現並在再次單擊超鏈接時消失？ 可以重復嗎？

Question

我正在尋找一種方法，使用戶單擊超鏈接后出現div，然后當用戶再次單擊它時使該div消失。 當前，用戶只能在按下超鏈接時使div出現，但是當您再次單擊超鏈接時，該div仍保留在其“ display：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輕松完成此slideToggle ：

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

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

});

的jsfiddle

Answer 2

$('#ShowAboutButton').click(function() {
    $('#About').toggle();
});

Answer 3

OOPS。 缺少您的代碼頂部。

<a onclick="showDiv(document.getElementById('About'))" id="ShowAboutButton">What's This?   

 <div id="About">
 </div> 

 function showDiv(obj) {
    if(obj.style.display == "block"){
     obj.style.display='none'
    }
    else(obj.style.display == "none"){
     obj.style.display='block'
    }
 }  

Answer 4

香草JavaScript：

var about = document.getElementById('About');
about.style.display='none';

document.getElementById('ShowAboutButton').addEventListener('click', function() {
  //Toggling
  if(about.style.display != 'block') {
return about.style.display='block';
  }
  about.style.display = 'none';

});