上次一篇是介紹如何製作多層選單的概念,這一篇的話,就是要介紹加上JQUERY效果的部分,因為有時候我們製作MENU可能分類很多,所以有時候需要下拉式選單的部分,而這邊介紹的是要如何把分類的部分,做成樹狀的概念,就是開,收合這樣,一起來看看今天這篇的教學部分!

首先我們先看到要完成的效果是如何,

第二層和第三層選單有收合部分效果存在,所以這篇要介紹大概如何製作,這是這篇程式碼的部分,這次有在每個部分做個細節的講解,

<!DOCTYPE html>
<html>
<head>
<title>多層選單製作JQUERY</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
$("li:has(ul)").click(function(e){
if(this==e.target){
if($(this).children().is(":hidden")){
//子項是隱藏的則顯示
$(this).css("list-style-image","url(minus.gif)")
.children().show();
}else{
//子項是顯示的則隱藏
$(this).css("list-style-image","url(plus.gif)")
.children().hide();
}
}
return false;    //避免不必要的事件混繞
}).css("cursor","pointer").click();    //手的符號

//對於沒有子項的選單,一律表示
$("li:not(:has(ul))").css({
"cursor":"default",
"list-style-image":"none"
});
});
</script>
</head>
<body>
<ul>
<li>第一層選單</li>
<li>第二層有樹狀的
<ul>
<li>樹狀選單</li>
</ul>
</li>

<li>第三層(兩階層)
<ul>
<li>3-1階層的
<ul>
<li>3-2階層的</li>
</ul>
</li>
</ul>
</li>

</ul>
</body>
</html>

今天主要講解的是$FUNCTION那一段,這邊我們有li有ul部分,增加一個點擊事件,按下去的話,如果你的選單有子項的,就會顯示url(minus.gif)這個圖片部分,相反的在點擊就是顯示url(plus.gif),CSS部分就請大家自己研究囉,至於.children就是子選項的意思,show和hide分別是顯示和隱藏,最後用一張程式碼圖讓大家更清楚明白了解囉。

 

熱門相關文章

網頁設計教學系列-使用JQUERY引導網友使用你網站
最近在學這個,也比較想要扎實在這上面,所以之後學到什麼就分享什麼,今天要講的東西,有點算是導覽的部分,你要如何讓網友知道你的網站從那邊開始點,所以你可以以按鈕顏色,來明確標示那些網友可以點,一起來看看今天的分享! 比如今天我們想要達到這樣的效果, 這邊分享HTML5語法寫法, <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQUERT基礎語法教學</title> <style> div{ font-size:12px; border:1px solid #003a75; margin:5px; } p{ margin:0px; padding:10px 10px; } .myClass{ background-color:#fff000; text-decoration:underline; } </style> <script type="text/javascript" ...
繼續閱讀
網頁設計教學系列-HTML5語法分享!
今天要介紹的東西,就是最近還滿夯的HTML5,這篇只是從一些基礎的東西開始分享,大概了解基本的觀念而已,之後如果學到更多好玩的東西,再一次分享給大家,不過昨天這樣摸一摸,還滿佩服賈伯斯所帶來當的創意,雖然HTML5還沒有真正完全到答一個標準,不過我想這是遲早的趨勢,一起來看! 比如我們呈現效果像下圖這樣,以前用HTML4語法也很簡單,就很多區塊設DIV就行了,這邊要分享HTML5的寫法, HTML5文件檔頭簡單設定 以往我們熟悉的HTML語法,剛開始文件一開頭都會這樣寫, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> 但HTML5的文件一開頭寫法相當簡單,只要像下圖這樣寫就可以 <!DOCTYPE html> 寫法變得相當簡單, 我們從WORDPRESS預設佈景也看到是這樣子寫的 <!DOCTYPE ...
繼續閱讀
網頁設計教學系列-從基本HTML語法開始!
最近我自己想了一下,因為自己平常都比較再研究HTML和WORDPRESS這一塊,加上時代的趨勢,HTML5的語法學會又是勢在必行,所以之後寫的文章會比較偏向網頁設計和一些網路行銷的東西,CHROME和FB社群教學有一些新的發現還是會陸續的寫,以及一些新的科技快訊等等的,畢竟我們要知道現在時代發生什麼事情,來看看今天最基本的教學。 HTML基本語法 今天分享的東西真得是網頁設計中基本的基本,但是就以網頁設計長久角度來講,這些基本功是要很紮實必須要會的,最後我也會分享一些基本HTML語法的網站,讓比較基礎者的人,可以更快的上手! HTML文件類型 首先我們看到這張圖, 最上面的文件類型宣告,也就是宣告這是什麼類型的網頁,像HTML就像圖片中的寫法一樣,分享一下HTML5的開頭是怎麼寫的,"<!DOCTYPE HTML>",相當簡短簡單,那你會問DOUBLE冠說,怎麼不分享HTML5語法開始,凡是有循序漸進,另一方面HTML都不懂得話,再學HTML5應該是完全看不懂,因為語法整體都不太一樣! <head></head>這一段就是要宣告一些動態變數,像有時候CSS也可以寫在這邊,或者是一些javascrip、jquery等等,都可以寫在這邊,之後再寫在<body></body>網頁內容部分去呼叫就可以,所以<body></body>就是指整體網頁呈現出來的感覺! CSS外部連結 上面這一張圖是WORDPRESS外部連結CSS,通常都是連結到style.css那邊,另外如果像DW用的本機端測試這些,它會像這張圖這樣, 基本語法測試 像我這邊在body裡面打一個<p>開始,如果你要打入一些字,在原始碼你必須打入在<p></p>的中間,或者是像<span></span>這種也可以,我這邊打一些字做測試, 呈現出來的效果就是這樣子, 如果你要讓它有顏色,原本是<p></p>,打成<p style="color:#000"></p>,中間再插入一些文字,文字顏色就會改變了, 呈現出來的效果, 如果最後你要讓它呈現在中間,<p style="text-align:center;color:#000"></p>中間再插入一些文字就可以了,   最後講到HTML語法是很基本的功夫,所以這邊我會分享幾個網站讓大家去自學一下,因為之後分享的文章對初學者來說,可能比較難懂,不過我還是會想辦法看怎麼呈現,會讓每一個人容易了解,因為自己現在也正在學,就順便分享給大家,也可以一起討論看有沒有什麼問題,以上的分享希望你會喜歡! HTML教學 HTML教學導覽:按這裡 飛肯設計:按這裡 HTML:按這裡
繼續閱讀
網頁設計教學系列-做出在兩個不同解析度所呈現出來的效果!
今天要分享的東西,可能從標題看不太出來在講什麼樣的意思,這邊今天要講的,就是網頁設計的爸爸和小孩,也就是父區塊和子區塊,有時候在1024X768看到的是子區塊,在1366X768看見的是父區塊和子區塊的結合,這樣做的好處就是不會在不同解析度下,所呈現出來的感覺不會差太多,讓我們來看看今天的教學! 比如我們今天看到一個部落格網站長這樣子,這是1024X768的解析度畫面, 不過在其他的寬螢幕和筆電可能是這樣子,比如1366X768,   或許是現在圖片尺寸關係,所以有點看不出來,不過如果在做網頁如果遇到不同解析度的話,是件麻煩問題,所以通常我們都會設父區塊和子區塊,比如今天我們設一個父區塊和子區塊, 之後我們在為這兩個區塊寫上CSS背景顏色,這邊是原始碼, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" ...
繼續閱讀
網頁設計教學系列-CSS+DIV排版-1
今天要分享的東西,也是網頁設計很基本的排版設計,以WORDPRESS來看,就是一塊header+content+sidebar+footer的一種排版方式居多,所以今天這裡要先介紹基本類似的兩欄式排版方式,先從基礎的學起,以後在用其它東西時,會比較得心應手,話不多說,馬上開始今天的排版教學! CSS排版教學 CSS+DIV排版 首先我們來看我們想要達到的效果,這是預覽CHROME17的畫面, HTML原始碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" ...
繼續閱讀
網頁設計教學系列-使用JQUERY引導網友使用你網站
網頁設計教學系列-HTML5語法分享!
網頁設計教學系列-從基本HTML語法開始!
網頁設計教學系列-做出在兩個不同解析度所呈現出來的效果!
網頁設計教學系列-CSS+DIV排版-1

DOUBLE冠就是愛升級

  • ※一起訂閱本站:按這裡
  • ※訂閱DOUBLE冠手機版本站:按這裡下載
  • ※引用網址:
  • ※如有發現圖檔無法預覽,請麻煩告知告知,將會盡速處理!謝謝~
  • ※請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處~謝謝~~
  • 日期:2012/04/23

    隨機文章

    FACEBOOK留言

    8 個留言

    1. test 說道:

      怎麼預設是開啟的呢?

    2. eddy 說道:

      要如何按下子項連接至網頁?

    3. lee 說道:

      請問
      F5重新整理後按展開的話會把所有子選項全部都展開
      有沒有辦法一層一層展開呢

    4. lader 說道:

      似乎是沒辦法一層層展開

    發表留言 »

    (姓名)
    (信箱)
    (網站)

    網站搜尋

    2015-DOUBLE冠就是愛升級 引用-Theme Sco v5.0 By:Scorpio

    本站不支援IE6以下的版本