Question

我想知道是否可以在单击链接后将隐藏的div下推？

我有；

<div class="container">
   <div class="hidden-top"></div>
   <div class="navbar"></div>
</div>

这是您可以实时查看的链接：https://jivesoftware.com/。只需点击语言标记即可。

Answer 1

是的，你可以这样做例如

function myFunction() {
  document.getElementById("demo").innerHTML = "<div class'hidden-top'>I am hidden div</div>";
}

<!DOCTYPE html>
<html>
<body>
<div class="container">
   <button onclick="myFunction()">Click me to show hidden div</button>
   <div class="navbar"></div>
</div>


<p id="demo"></p>
</body>
</html>

Answer 2

您可以使用class（在下面的示例中为“ hidden”）隐藏（可见）东西。然后以编程方式切换该类。

document.querySelector('button').addEventListener('click', toggle)

function toggle() {
  document.getElementById("thatDiv").classList.toggle('hidden')
}

.forStyling {
  background-color: pink;
  height: 20px;
  -webkit-transition: height .5s;
  transition: height .5s;
}

.hidden {
  height: 0;
  -webkit-transition: height .5s;
  transition: height .5s;
}

<div id='thatDiv' class="forStyling hidden">I am hidden div</div>
<button>Click me to show hidden div</button>
<p>
  Content that shifts down.

单击从顶部推隐藏的div

2 个答案: