js实现面板显示隐藏以及文字的变化

qq_33205354

于 2018-05-21 16:33:49 发布

阅读量1.7k

点赞数

文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_33205354/article/details/80295644

版权

也可以把面板替换为图片，看自己需求而定

<!DOCTYPE HTML>

<html>
<head>
<meta charset=UTF-8>
<title>展开隐藏</title>
<script type="text/javascript">
   function fun(){
    var ch=document.getElementById("s");
    var val=document.getElementById("wen");
    if(s.style.display='none'&&val.innerHTML=="展开")
    {
       s.style.display='block';
       val.innerHTML="收起";
    }
    else{
       s.style.display='none';
       val.innerHTML="展开";
    }
   }
</script>
</head>
<body>
   <p οnclick="fun()" id="wen">展开</p>
    <div id="s" style="display: none;width:300px;height:200px;background-color:#F2F2F2;">
       本期公演环节，孟美岐带领小组成员张溪、江璟儿等演绎作品《撑腰》，青春洋溢的姑娘们，满脸的胶原蛋白，马甲线、大长腿，白纱裙配热裤，呈现出一种又美又仙的高级美，对台下眨一下眼，“电”倒无数。
    </div>
</body>

</html>

效果如下：