[請益] 用jquery實現一堆目錄的less/more切換
最近在作網站改版.
但有一個目錄的地方地方由於資料量太大.
用土炮來排版加code實在太廢時間, 所以想用jquery來幫助排版.
Ｑ：狀況如下述...
資料大概有21個<ul>, 每一個<ul>大概有10~30左右的<li>
至於包裝這21個<ul>的容器, 是用<div>來裝, 弄成3欄7列...
簡單借用Y拍的畫面 http://tw.bid.yahoo.com/ 就是像"拍賣分類"那樣
我的css(只寫出重點部份)
<style>
div {
width: 600px;
margin: 0px auto;
}
div ul {
list-style-image:none;
display: inline-block;
float: left;
width: 200px;
}
div ul li {
display: inline;
padding-right: 0.66em;
}
html>body div ul li {
border-right: 1px solid #000;
}
</style>
------------------------- css end -----------------------------
HTML部份
..前略
<div>
<ul> // 第1個ul
<li>001</li>
...
<li>021</li>
</ul>
<ul> // 第2個ul
...
</ul>
...
...
<ul> // 第21個ul
<li>001</li>
...
<li>010</li>
</ul>
</div>
..後略
--------------------- Problem is coming ----------------------
由於每一個ul裡的li數量不一, 有的很少有的很多
整個版排出來 很雜亂不美觀, 所以我想達成預設只留每一組UL裡的前6個li
第7個之後隱藏
並動態增加最後一個li當切換用.
我自己寫了一半, 目前似乎有達成效果了...
(但click對象不是ul裡的a而是ul本身 <囧>)
code很醜, 且在<li>裡的連結似乎失去效果了, 不知為啥???
可否請各位前輩幫幫忙檢查一下哪裡可以改進呢? <(_ _)>
http://hanasan38.myweb.hinet.net/ajax/ul.html
先謝了~
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 118.168.44.68
推
12/11 19:24, , 1F
12/11 19:24, 1F
→
12/11 19:26, , 2F
12/11 19:26, 2F
推
12/11 19:40, , 3F
12/11 19:40, 3F
→
12/11 19:40, , 4F
12/11 19:40, 4F
→
12/11 19:45, , 5F
12/11 19:45, 5F
→
12/11 19:48, , 6F
12/11 19:48, 6F
推
12/11 19:51, , 7F
12/11 19:51, 7F
→
12/11 19:54, , 8F
12/11 19:54, 8F
→
12/11 19:56, , 9F
12/11 19:56, 9F