 |
|
- lds dsjfl djs fds f
- ldjs fdls fdsfjd sj fdlsj fd slf
- dls fdls fds fld sf dsl fdjslfd sf ds
- dlsfldsj f dsfj klds fds fj dsfj dkls fds fd s
- dskf dsj fdsj fljd slf dsl fdls fds f dslf dsf dsf
- ldjs fld sjfjd sljf dsj fljd slf dlsj fdjs flj dslfj dlsj fljd slfj dsljf lds fjdslkfj dlsjf lds fldjs lf dsjf ds f dsf
- dlsjfds fds fd fds fds fds
CSS 語法，請複製到<body>之後：
<style>
/*
整個list的CSS語法
*/
ol#ol20141221 {
margin: 0px;
padding-left: 0.5em;
list-style-type: none;
position: relative;
z-index: 99;
}
/*
整個奇數列list的CSS語法
*/
ol#ol20141221 >li:nth-child(odd) {
font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
margin-bottom: 0.5em;
border-bottom: 1px solid black;
cursor: pointer;
background-color: white;
}
/*
整個偶數列list的CSS語法
*/
ol#ol20141221 >li:nth-child(even) {
font-family: Verdana, '新細明體';
font-size: 16px;
font-weight: normal;
line-height: 1.6em;
letter-spacing: 0.1em;
border-bottom: 1px solid black;
margin: 1em 0px;
padding-bottom: 0.3em;
background-color: white;
}
/*
整個偶數列list隱藏的CSS語法
*/
ol.displno >li:nth-child(even) {
display: none;
}
</style>
/*
整個list的CSS語法
*/
ol#ol20141221 {
margin: 0px;
padding-left: 0.5em;
list-style-type: none;
position: relative;
z-index: 99;
}
/*
整個奇數列list的CSS語法
*/
ol#ol20141221 >li:nth-child(odd) {
font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
margin-bottom: 0.5em;
border-bottom: 1px solid black;
cursor: pointer;
background-color: white;
}
/*
整個偶數列list的CSS語法
*/
ol#ol20141221 >li:nth-child(even) {
font-family: Verdana, '新細明體';
font-size: 16px;
font-weight: normal;
line-height: 1.6em;
letter-spacing: 0.1em;
border-bottom: 1px solid black;
margin: 1em 0px;
padding-bottom: 0.3em;
background-color: white;
}
/*
整個偶數列list隱藏的CSS語法
*/
ol.displno >li:nth-child(even) {
display: none;
}
</style>
jQuery 互動語法，請複製於<body>之後：
<script
src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$('ol#ol20141221').find('li').filter(':even').click(function() {
$(this).next().slideToggle(600);
});
});
</script>
<script>
$(function() {
$('ol#ol20141221').find('li').filter(':even').click(function() {
$(this).next().slideToggle(600);
});
});
</script>
影 音教學：
沒有留言:
張貼留言