2014年12月21日 星期日

小資料量快速互動list：使用ol / li：easy jQuery






  1. 第一中標
  2. 第一中標的內文。第一中標的內文。第一中標的內文。
  3. 第二中標
  4. 第二中標的內文。第二中標的內文。第二中標的內文。第二中標的內文。
  5. 第三中標
  6. 第三中標的內文。第三中標的內文。第三中標的內文。第三中標的內文。第三中標的內文。
  7. 第四中標



  1. lds dsjfl djs fds f
  2. ldjs fdls fdsfjd sj fdlsj fd slf
  3. dls fdls fds fld sf dsl fdjslfd sf ds
  4. dlsfldsj f dsfj klds fds fj dsfj dkls fds fd s
  5. dskf dsj fdsj fljd slf dsl fdls fds f dslf dsf dsf
  6. 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
  7. 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>



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>



影 音教學：






沒有留言:

張貼留言