登陆 注册

html,css如何做一个折叠面板?

守望者 2020-04-10 416人围观 ,发现1个评论 htmlcss

      用html, css,javascript做一个折叠面板,实现点击标题框可以展开,收起内容面板,即折叠效果,效果图如下:

QQ截图20200411151819.png

html部分需要以下元素:


     <dl>元素:作为整个折叠面板的包含框;

     <dt>元素:作为折叠面板的标题部分,等会点击这个;

     <dd>元素:作为内容面板,是被展开,收起的部分;


CSS部分:


    设置好折叠面板的背景,字体等样式之后,还需要两个重要部分:


    1. 设置dl标签的“extend”类样式,表示折叠面板展开后的状态:

 dl.extend{ overflow: visible;}

 

  2. 设置dl标签的“collapse”类样式,表示折叠面板收起后的状态:

dl.collapse{
        	height: 50px;
        	overflow: hidden;
        }


javascript部分:


   定义一个Swich()函数,用来实现折叠面板两个状态的相互转换:


 function Switch(title,a,b){.....}


          title:  折叠面板的标题;

           a:  折叠面板包含框;

           b: 折叠面板中的内容面板; 


     如果面板为收起状态,则将其“展开”,并更新内容:

if(a.className=="collapse"){a.className="extend";b.innerText = title+"  点击收起";}


     否则,如果面板为展开状态,则将其“收起”,并更新内容:

else{a.className="collapse";b.innerText = title+" 点击展开";}


     获取dl和dt元素,并为他们添加鼠标点击监听:

a.onclick = function(){Switch("标题栏",a,b)};


    标题栏设置禁止选中字体:

a.onselectstart = function(){return false;}


全部实例代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 
     <style>
        body{
        	margin: 200px;
        	padding: 0;
        	
        }
        dl{background-color: gray;}
        dt{
        	cursor: pointer;
        	padding: 1em;
        	background-color: red;}
        dd{
        	height: 300px;
        	background-color: orange;
        	}
        dl.extend{
        	overflow: visible;
        }
        dl.collapse{
        	height: 50px;
        	overflow: hidden;
        }
     </style>
    
    <script>
        
       function Switch(title,a,b){
        	if(a.className=="collapse"){a.className="extend";b.innerText = title+"  点击收起";}
        	else{a.className="collapse";b.innerText = title+" 点击展开";}
        }
        
        window.onload = function(){
        	var a = document.getElementsByTagName("dl")[0];
        	var b = document.getElementsByTagName("dt")[0];
        	
        	a.onclick = function(){Switch("标题栏",a,b)};
        	a.onselectstart = function(){return false;}
        }
        
    </script>
    
    </head>
    
    <body>
        
        
        <dl class="">
        	
        	<dt>标题栏     点击收起</dt>
        	<dd>
        		<p>内容栏</p>
        	</dd>
        </dl>
    </body>
    
</html>


   转载请附上本文链接:https://tufeng.xyz/htmlcss/45.html,谢谢合作!

已有1条评论
请关注微信公众号
微信二维码