切换JavaScript的可见性

-2

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

<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的情况下做到这一点？

来源

2017-08-11 Nautilus

只是检查，如果该段是可见的，在这种情况下，隐藏它，否则显示它。 – Teemu

使用'display'' none'或'block'，而不是可见性。 –

https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript?rq=1 – chrisjlee

您可以使用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>

来源

2017-08-11 21:07:23

你可以测试CSS属性，并设置一个VAR一旦第一个检查。

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>

来源

2017-08-11 21:16:30

这里的非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>

来源

2017-08-12 03:24:09

切换JavaScript的可见性

回答

相关问题