网页元素折叠展示-优快云博客

本文链接：https://blog.youkuaiyun.com/xiantouxu/article/details/77417029

<!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属性继承自该元素的子节点。