Recently I saw the teaching video has a lot of accordion effect, I also try to write, as a practice.
Tomorrow I have a holiday, will go to find a job, do not know, my front-end road, can formally start.
Rookie take-off opportunities are not, it is embarrassing.
Purely Practice:
Effect
Html:
<ulclass= "Wrap"> <Liclass= "Checked"> <span>Option 1</span> <Div>1</Div> </Li> <Li> <span>Option 2</span> <Div>2</Div> </Li> <Li> <span>Option 3</span> <Div>3</Div> </Li> <Li> <span>Option 4</span> <Div>4</Div> </Li> <Li> <span>Option 5</span> <Div>5</Div> </Li></ul>
Css:
Ul,li,div,span{margin:0;padding:0; }Li{List-style:None; }span{Display:Block;Border-bottom:1px solid Black;Background-color:Orange; }. Wrap{width:400px;Height:500px;Border:1px solid Black; }. Wrap Li{width:400px;Height:40px;Overflow:Hidden; }ul li.checked{Height:340px; }. Wrap Li Span{Height:39px;Line-height:39px;text-indent:20px; }. Wrap Li Div{Height:300px;Line-height:300px;text-align:Center;font-size:50px; }
Jquery:
$ (function() { $ ("ul Li span"). MouseOver (function() { $ (this) . Parent (). Animate ({height:340},500); $ (this). Parent (). siblings (). Animate ({height:40},500); }) })
jquery for a simple accordion effect