<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <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> <br 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="box1"/> - box one </br> <input type="radio" name="box1"/> - box one </br> <input type="radio" name="box1"/> - box one </br> <input type="radio" name="box1"/> - box one </br> <input type="radio" name="box1"/> - box one </br> <button>Submit</button> </div> </div> </form> <script type="text/javascript"> /** * Css Visibility属性来隐藏和显示消息 * * msg.style.hidden = "visible"; //显示 * msg.style.hidden = "hidden"; //隐藏,但占用页面空间 * * 或者CSS 的 display属性 * msg.style.display = "block"; //显示 * msg.style.display = "none"; //从显示状态删除 * * display的4个属性 * none: 该元素从显示中删除 * block:元素当做一个块级元素来处理,在其前后都有换行 * inline-block: 元素内容像一个块级元素一样格式化,然后向内联内容一样排列 * inherit:(默认的显示),并且执行display属性继承至该元素的父节点 * * * @type {NodeList} */ 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 == "label"){ elements[i].onclick = switchDisplay; } } //根据状态折叠或展开 function switchDisplay(){ 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> </html>
JS通过操作Element的Css来实现隐藏和显示(本示例只有隐藏)
最新推荐文章于 2024-08-16 13:41:04 发布