创建可折叠的表单区段

来源：互联网发布：喜剧片知乎编辑：程序博客网时间：2024/05/21 11:33

<!DOCTYPE html><html><head>    <title>Collapsed From Elements</title>    <style>    .lable{        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;        width: 400px;    }    button{        margin: 20px;    }    </style></head><body><form action="">    <div>        <div id="section1" class="lable">            <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="lable">            <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>        </div>    </div></form><script type="text/javascript">var elements = document.getElementsByTagName("div");//折叠起所有的区段for(var i =0;i<elements.length;i++){    if(elements[i].className =="elements"){        elements[i].style.display = "none";    }else if(elements[i].className =="lable"){        elements[i].onclick = switchDisplay;    }}//根据状态折叠和展开function switchDisplay(){    var parent = this.parentNode;    var target = parent.getElementsByTagName("div")[1];//class为elements的div    if(target.style.display == "none"){        target.style.display = "block";    }else{        target.style.display = "none";    }    return false;}</script></body></html>

如图将CheckBoxs折叠，将Buttons展开
这里写图片描述
知识点：关于display的设置
+ none：该元素完全从显示中删除
+ block：当display设置为block时，元素当做一个块级元素处理，在其前后都有换行
+ inline-block：其内容像一个块级元素一样格式化，然后向内联内容一样排列
+ inherit：默认的显示，并且制定display属性继承自该元素的子节点。

阅读全文

0 0