<!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>
????<title></title>
????<script?type="text/javascript">
????????var?toggler=document.getElementById("strHref");//開(kāi)關(guān)
????????var?hpn=document.getElementById("hpn");//隱藏的內(nèi)容
????????function?showdiv()?{//展開(kāi)函數(shù)
????????????hpn.style.display="block";
????????????toggler.href="javascript:hidediv();";
????????????toggler.innerHTML="關(guān)閉";
????????????
????????????
????????}
????????function?hidediv()?{//收起函數(shù)
???????????hpn.style.display="none";
???????????toggler.href="javascript:showdiv();";
???????????toggler.innerHTML="展開(kāi)";
???????????
???????????
????????}
????</script>
</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>
2016-10-22
變量作用域問(wèn)題，var聲明的變量是局部變量。
2016-12-20
樓上的回答有錯(cuò)，因?yàn)閖avascript的執(zhí)行順序是：順序執(zhí)行，此時(shí)
var?toggler=document.getElementById("strHref");//開(kāi)關(guān)
?var?hpn=document.getElementById("hpn");//隱藏的內(nèi)容
獲取的是不存在的元素。
應(yīng)該寫(xiě)成等文檔加載完成后在使用方法或者把〈script〉寫(xiě)在元素后面。
? ? <script type="text/javascript">
window.onload=function(){
? ? var hpn=document.getElementById('hpn');
? ? var strHref=document.getElementById('strHref');
? ??
? ? function showdiv(){
? ? ? ? ?hpn.style.display='block';
? ? ? ? ?strHref.innerHTML='收起-';
? ? ? ? ?strHref.href='javascript:hidediv()';
? ? }
? ? function hidediv(){
? ? ? ? ?hpn.style.display='none';;
? ? ? ? ?strHref.innerHTML='展開(kāi)+';
? ? ? ? ?strHref.href='javascript:showdiv()';
? ? }
}
? ? </script>