5.7 隐藏列表，点击出现 P154

来源：互联网发布：淘宝2015年销售额编辑：程序博客网时间：2024/05/17 23:06
<!DOCTYPE html><head>    <title>Collapsed Form Elements</title>    <style>        .label        {            width: 400px;            margin: 10px 0 0 0;            padding: 10px;            background-color: #ccccff;            text-align: center;            border: 1px solid #ccccff;        }        .elements        {            border: 1px solid #ccccff;            padding: 10px;            border: 1px solid #ccccff;            width: 400px;        }        button        {            margin: 20px;        }    </style></head><body><form>    <div>        <div id="section1" class="label">            <p>Checkboxes</p>        </div>        <div id="section1b" class="elements">            <input type="checkbox" name="box1" /> - box one<br />            <input type="checkbox" name="box1" /> - box one<br />            <input type="checkbox" name="box1" /> - box one<br />            <input type="checkbox" name="box1" /> - box one<br />            <input type="checkbox" name="box1" /> - box one<br />        </div>    </div>    <div>        <div id="section2" class="label">            <p>Buttons</p>        </div>        <div class="elements">            <input type="radio" name="button1" /> - button one<br />            <input type="radio" name="button1" /> - button one<br />            <input type="radio" name="button1" /> - button one<br />            <input type="radio" name="button1" /> - button one<br />            <input type="radio" name="button1" /> - button one<br />            <button>Submit</button>        </div>    </div></form><script>    var elements = document.getElementsByTagName("div");for(var i=0;i<elements.length;i++){    if(elements[i].className=="label"){        elements[i].onclick=switchDisplay;    }else if(elements[i].className=="elements"){        elements[i].style.display="none";    }}    function switchDisplay(){
//此处对要点击DIV的取得运用了this对象，指代发生onclick操作的elements[i].        var parent = this.parentNode;        var target = parent.getElementsByTagName("div")[1];        if (target.style.display == "none") {            target.style.display="block";        } else {            target.style.display="none";        }        return false;    }</script></body>
0 0