JavaScript中的切换可见性

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的情况下完成这个操作？

- Nautilus

---

只需检查段落是否可见，如果是，则隐藏它，否则显示它。 - Teemu

请使用 display 的 none 或 block，而不是 visibility。 - shukshin.ivan

https://dev59.com/6HVC5IYBdhLWcg3wvT7g?rq=1 - chrisjlee

Answer 1

您可以使用Element#classList来切换类的开启和关闭：

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

.hideP {
  visibility: hidden;
}

<button id="button">Click me</button>

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

- Ori Drori

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>

- user663031

Answer 3

你可以测试CSS属性并在进行第一次检查后设置一个变量。

var $test;
function show() {
  if ((document.getElementById("p").style.visibility = "hidden") | ($test!="visible"))
  {document.getElementById("p").style.visibility = "visible";
  $test="visible"
  }
  else  
  {document.getElementById("p").style.visibility = "hidden";
  $test="hidden"}
}

#p {
  visibility: hidden;
}

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

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

- G-Cyrillus

Answer 4

基于user663031的答案，这是我的通用CSS解决方案，可以在页面中多次使用：

/* hide the input field */
.toggle-section > input.toggle-control { 
display: none; 
}
/* start with hidden collapsed icon */
.toggle-section > label .toggle-icon-expanded { 
display: none; 
}
/* display expanded icon */
.toggle-section > input.toggle-control:checked ~ label > .toggle-icon-expanded { 
display: inline; 
}
/* hide collapsed icon */
.toggle-section > input.toggle-control:checked ~ label > .toggle-icon-collapsed { 
display: none; 
}
.toggle-section .toggle-text * { 
display:inline; vertical-align:top 
}
/* start with hidden contents */
.toggle-section > .toggle-contents { 
display: none; 
}
/* display contents when expanded */
.toggle-section > input.toggle-control:checked ~ .toggle-contents { 
display: block; 
}

<div id="example-1" class="toggle-section">
<input id="example-1-check" class="toggle-control" type="checkbox">
<label for="example-1-check"><span class="toggle-icon-collapsed">&gt; </span><span class="toggle-icon-expanded">v </span><span class="toggle-text">More details here</span></label>
  <div class="toggle-contents">

    <p>This is some text.</p>
  </div>
</div>



<div id="example-2" class="toggle-section">
<input id="example-2-check" class="toggle-control" type="checkbox">
<label for="example-2-check"><span class="toggle-icon-collapsed">&gt; </span><span class="toggle-icon-expanded">v </span><span class="toggle-text">Other details here</span></label>
  <div class="toggle-contents">

    <p>This is another text.</p>
  </div>
</div>

- not2savvy