                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /展開(kāi)與收起效果

幫忙玩找茬

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
????<meta?charset="utf-8"/>
????<title></title>
????<style?type="text/css">
????????body
????????{
????????????margin:?0?auto;
????????????padding:?0px;
????????}
????????#pn
????????{
????????????background:?#e8e8e8;
????????????width:?600px;
????????????height:?auto;
????????????margin:?0?auto;
????????????padding:?5px;
????????????font-size:?9pt;
????????}
????????.slide
????????{
????????????margin:?0;
????????????padding:?0;
????????????width:?600px;
????????????border-top:?solid?4px?gray;
????????????margin:?0?auto;
????????}
????????.btn-slide
????????{
????????????background:?gray;
????????????text-decoration:?none;
????????????text-align:?center;
????????????width:?120px;
????????????height:?30px;
????????????padding:?10px?0?0?0;
????????????display:?block;
????????????color:?#FFF;
????????????margin:?0?auto;
????????}
????</style>
????<script?type="text/javascript">
????????function?showdiv()?{
????????????document.getElementById("hpn").style.display?=?"block";
????????????document.getElementById("strHref").href?=?"javascript:hidediv();";
????????????document.getElementById("strHref").innerHTML?=?"收起-"；
????????}
????????function?hidediv()?{
????????????document.getElementById("hpn").style.display?=?"none";
????????????document.getElementById("strHref").href?=?"javascript:showdiv();";
????????????document.getElementById("strHref").innerHTML?=?"展開(kāi)+"；
????????}???
????</script><!--上面是我的代碼，不能執(zhí)行，不知為什么?-->
???<!--??<script?type="text/javascript">
????????function?showdiv()?{
????????????document.getElementById("hpn").style.display?=?"block";
????????????document.getElementById("strHref").href?=?"javascript:hidediv();";
????????????document.getElementById("strHref").innerHTML?=?"收起-";
????????}
????????function?hidediv()?{
????????????document.getElementById("hpn").style.display?=?"none";
????????????document.getElementById("strHref").href?=?"javascript:showdiv();";
????????????document.getElementById("strHref").innerHTML?=?"更多選項(xiàng)+";
????????}
????</script>	這是可以執(zhí)行的資料下載中的源代碼剪切-->
</head>
<body>
????<div?id="pn">
????????<p>
????????????手機(jī)?-?商品篩選</p>
????????<p>
????????????網(wǎng)絡(luò)：移動(dòng)4G?聯(lián)通3G?電信3G</p>
????????<div?id="hpn"?style="display:?none">
????????????<p>
????????????????價(jià)格：5000元以上?4000-4999?3000元以下</p>
????????????<p>
????????????????特點(diǎn)：0元購(gòu)機(jī)?防水?長(zhǎng)待機(jī)</p>
????????</div>
????</div>
????<p?class="slide">
????????<a?href="javascript:showdiv();"?id="strHref"?class="btn-slide">展開(kāi)</a>????<!--點(diǎn)擊按鈕-->
????</p>
</body>
</html>