Question

我正在尝试制作一个按钮，在点击时显示一个段落并在第二次点击时隐藏它。我没有使用更传统的方法，而是使用JavaScript将样式从visibility:hidden更改为visibilitiy:visible。

<style>
#p {
visibility:hidden;
}
</style>

<button onclick="show() ">Click me</button>

<p id="p">hi</p>

<script>
function show() {
    document.getElementById("p").style.visibility = "visible";
}
</script>

如果没有jQuery，我怎么能这样做？

Answer 1

您可以使用Element#classList来打开和关闭课程：

＆＃13;

var p = document.getElementById("p"); // get a reference to p and cache it

function show() {
  p.classList.toggle('hideP'); // toggle the hideP class
}

document.getElementById('button').addEventListener('click', show); // add an event listener to the button

＆＃13;

.hideP {
  visibility: hidden;
}

＆＃13;

<button id="button">Click me</button>

<p id="p" class="hideP">hi</p>

＆＃13;

Answer 2

这是非JS方法，使用隐藏的复选框来存储状态：

input:checked + #text { display: none; }

<label for="check">Press me</label>

<input id="check" type="checkbox" style="display: none; ">

<p id="text">This is some text.</p>

在JavaScript中切换可见性

2 个答案: