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轻松完成此操作：

$("#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

Vanilla 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';

});

如何在单击超链接时显示div并在第二次单击超链接时消失？这可以重演吗？

4 个答案: