                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript入门篇

如果我想通一个同一个按钮，反复点击出现“隐藏”和“显示”的效果，应该怎么写啊？

热爱学习又爱玩

2016-06-25

源自：JavaScript入门篇 3-5

关注问题我要回答

1253

操作

收起

6 回答

KeithChen
2016-06-27

为什么没有显示全啊...

function toggle(){
 var button = document.getElementById("button");
 if (button.display == "block"){
     button.display = "none";
     return;
 }
 button.display = "block";
}

1 回复有任何疑惑可以回复我~

收起回答

KeithChen
2016-06-27

function toggle(){
 var button = document.getElementById("button");
 if (button.display == "block"){
     button.

0 回复有任何疑惑可以回复我~

收起回答

Molly喜

function toggle(){ var button = document.getElementById("con"); if (button.style.display == "block"){ button.style.display = "none"; return; } button.style.display = "block"; } </script>

2017-12-08 回复有任何疑惑可以回复我~

Song_yc
2016-06-25

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<p>这是一个段落。</p>

var button = document.querySelector('button'),

p = document.querySelector('p');

var isHide = false;

button.onclick = function () {

if(!isHide) {

p.style.display = "none";

}else {

p.style.display = 'block';

}

isHide = !isHide;

}

</script>

</body>

</html>

1 回复有任何疑惑可以回复我~

收起回答

Molly喜

能具体讲一下原理吗？

2017-12-08 回复有任何疑惑可以回复我~

不懂后端的前端不是好产品
2016-06-25

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>//必须要引入jq
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();//一句话搞定
});
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>