作者mrbigmouth (拒絕崩潰的蒲公英)
看板PHP
標題Re: [請益] 開魚可折疊選單
時間Sun Jul 15 20:44:54 2012
聽說有個板叫ajax是專門討論javascript的
不過我還是回一些簡單的code好了
這種情況我傾向用hash紀錄
一開始就先預設把所有導覽列隱藏
<div id="nav">
<ul style="display:none;">
<li>導覽列一連結一</li>
<li>導覽列一連結二</li>
</ul>
<ul style="display:none;">
<li>導覽列二連結一</li>
<li>導覽列二連結二</li>
</ul>
</div>
在ready的時候讀取hash值去自動展開
$(document).ready(function(){
var hash = windiw.location.hash.substr(1);
$('#nav ul:eq('+ hash + ')').show();
});
這樣如果你連結到該頁時，如果要讓導覽列一自動打開就在連結後自動加一個#0
要讓二打開就加#1
為了可讀性，還可以考慮在ul上用data屬性紀錄其名稱
<div id="nav">
<ul style="display:none;" data-nav="user">
<li>user導覽列的連結一</li>
<li>user導覽列的連結二</li>
</ul>
<ul style="display:none;" data-nav="board">
<li>board導覽列的連結一</li>
<li>board導覽列的連結二</li>
</ul>
</div>
$(document).ready(function(){
var hash = windiw.location.hash.substr(1);
$('#nav ul[data-nav="' + hash + '"]').show();
});
這樣要讓user導覽列打開就在連結後加#user
要讓board打開就加#board
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 1.164.71.105
1F：推 rjackie:感謝，但是我是用資料庫拉資料的也可以這樣做嗎? 07/15 22:52
2F：推 rjackie:因為我的<li>只會有一個，但是資料庫中有一堆 07/15 22:56
3F：→ mrbigmouth:javascript是前端 跟你後端要怎麼拉資料怎麼做沒關係 07/16 14:50
4F：→ mrbigmouth:我給的程式是不管有多少ul,li都能做的 07/16 14:50