Home > Developer > Web Develop
is a accordion component, implement its UI with Html+css, and use object-oriented thinking to achieve the folding effect JS. If you can use a pure CSS to achieve its folding effect is better. ps/This is millet 15 years of a school recruit pen test, inadvertently saw on the realization of a bit.
This problem makes the best use of CSS to achieve, then the survey of knowledge points more! Especially CSS selectors this piece. The specific implementation code is as follows.
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <title>Pure CSS Implementation Blinds</title> <styletype= "Text/css"> * {margin:0;padding:0; }#parent >li> span{background:#999999;Display:Block;width:200px;Border:1px solid #ECEEF2;}Li{Line-height:40px;Display:Block;}Li P{Display:Inline-block;width:0px;Height:0px;Border-left:5px Solid Transparent;Border-right:5px Solid Transparent;Border-top:5px solid#2f2f2f; }Li>ul{Display:None;}Li>ul>li{Border:1px solid #DEDEDE;width:199px;}#parent Span:hover + ul{Display:Block;}#parent span:hover >p{Display:Inline-block;width:0px;Height:0px;Border-top:5px Solid Transparent;Border-bottom:5px Solid Transparent;Border-left:5px solid#2f2f2f;} </style> </Head> <Body> <ulID= "Parent"> <Li> <span><P></P>List</span> <ul> <Li>Child list</Li> <Li>Child list</Li> <Li>Child list</Li> </ul> </Li> <Li> <span><P></P>List</span> <ul> <Li>Child list</Li> <Li>Child list</Li> <Li>Child list</Li> </ul> </Li> <Li> <span><P></P>List</span> <ul> <Li>Child list</Li> <Li>Child list</Li> <Li>Child list</Li> </ul> </Li> </ul> </Body></HTML>
Implementation with HTML+CSS--folding effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
