JQuery初步學習

文章目錄

一、前言
二、概述
- 2.1 介紹
- 2.2 安裝
三、語法
- 3.1 文檔就緒
- 3.2 選擇器
四、事件
- 4.1 概述
- 4.2 事件綁定/解綁
- 4.3 一次性事件
- 4.4 事件委托
- 4.5 自定義事件
五、效果
- 5.1 隱藏/顯示
- 5.2 淡入淡出
- 5.3 滑動
- 5.4 動畫
六、鏈
七、HTML
- 7.1 內容/屬性
- 7.2 元素操作
- 7.3 類屬性
- 7.4 樣式屬性
- 7.5 遍歷dom
- 7.6 過濾元素

一、前言

官方網站：https://jquery.com/

參考資料：https://learn.jquery.com/about-jquery/、https://www.runoob.com/jquery/jquery-tutorial.html

二、概述

2.1 介紹

jQuery 是一個快速、小型且功能豐富的 JavaScript 庫。它可以在多個瀏覽器上通過使用API來遍歷HTML 文檔、事件處理、動畫和 Ajax 等

2.2 安裝

下載鏈接：https://jquery.com/download/，選擇適宜的版本進入頁面后，右鍵保存為文件，然后將下載好的文件放在網頁的同一目錄下，就可以開始使用JQuery了

除此之外，也可以使用CDN來使用JQuery，例如使用百度的CDN：

<head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

三、語法

3.1 文檔就緒

在DOM加載完成后才開始對DOM進行操作，基本格式為：

$(document).ready(function(){// JQuery代碼
});// 也可以這么寫
$(function(){// JQuery代碼
});

舉個栗子：當刷新網頁時，會觸發警告框

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( document ).ready(function() {alert( "document loaded" );});</script></head><body><p>Hello world!</p></body>
</html>

也可以寫成下面形式，效果都是一樣的

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {alert( "window loaded" );});</script></head><body><p>Hello world!</p></body>
</html>

3.2 選擇器

JQuery通過選取HTML元素來對其進行操作；語法：$(selector).action()

selector：選擇器，結合XPath語法和CSS選擇器語法
action()：對元素的操作

四、事件

4.1 概述

常見DOM事件：

鼠標事件	鍵盤事件	表單事件	文檔/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

事件對象的關鍵屬性和方法：

4.2 事件綁定/解綁

????????????????綁定事件???????????????

on方法用來綁定一個或多個事件處理函數，格式為on(events[,selector][,data],handler)

events：事件

selector：選擇器，用于篩選觸發事件的選定元素后代

data：數據，觸發事件時用來傳遞給處理程序

handler：處理器，觸發事件時要執行的函數

// 單個事件
$("button").on("click", function() {console.log("按鈕被點擊");
});// 多個事件（共用處理函數）
$("input").on("focus blur", function(e) {console.log(e.type); // 輸出 'focus' 或 'blur'
});// 多個事件和多個處理
$( "div" ).on({mouseenter: function() {console.log( "hovered over a div" );},mouseleave: function() {console.log( "mouse left a div" );},click: function() {console.log( "clicked on a div" );}
});// 將數據傳遞給處理程序
$( "button" ).on( "click", {name: "Karl"
}, function greet( event ) {alert( "Hello " + event.data.name );
} );

除此之外，也可以使用快捷方法：

方法	描述
`click()`	按鈕點擊時觸發事件
`dblclick()`	雙擊元素時觸發事件
`mouseenter()`	鼠標穿過元素時觸發事件
`mouseleave()`	鼠標離開元素時觸發事件
`mousedown()`	鼠標移動到元素上方，并按下按鍵時觸發事件
`mouseup()`	在元素上方松開鼠標按鈕時觸發事件
`hover()`	懸停在元素上方時觸發事件
`focus()`	元素獲得焦點觸發事件
`blur()`	元素失去焦點觸發事件

click方法：按鈕點擊時會觸發事件

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "#btn" ).click(function() {alert( "按鈕被點擊了！" );})});</script></head><body><p>Hello world!</p><button class="btn" id="btn">Click me!</button></body>
</html>

dblclick方法：雙擊元素時，會觸發事件

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "p" ).dblclick(function() {alert( "文本被雙擊了！" );})$( "#btn" ).click(function() {alert( "按鈕被單擊了！" );})});</script></head><body><p>Hello world!</p><button class="btn" id="btn">Click me!</button></body>
</html>

mouseenter方法：鼠標穿過元素時，會觸發事件

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "p" ).mouseenter(function() {alert( "文本被穿過了！" );})});</script></head><body><p>Hello world!</p></body>
</html>

????????????????事件解綁???????????????

通過使用off方法來移除通過on方法綁定的事件

// 移除所有事件
$("button").off();// 移除特定類型事件
$("input").off("focus");// 移除委托事件
$("#container").off("click", ".dynamic-item");

4.3 一次性事件

one方法只執行一次后就會自動解綁：

// 單個事件
$("button").one("click", function() {alert("僅顯示一次");
});// 多個事件
$("input").one("focus blur", function(e) {console.log(e.type); 
});

4.4 事件委托

事件委托利用事件冒泡，將子元素的事件處理程序綁定到父元素上，這樣可以通過父元素統一管理子元素的事件處理程序。

在父元素上監聽子元素事件，格式為父元素.on(事件,子選擇器,處理函數)

$( "#list" ).on( "click", "a", function( event ) {event.preventDefault();console.log( $( this ).text() );
});

事件委托與直接綁定的區別：

4.5 自定義事件

trigger方法可以手動觸發元素上的事件，包括自定義事件，語法為trigger(eventType[,extraParameters])或者trigger(event[,extraParameters])

eventType：事件類型

extraParameters：傳遞給事件處理程序的其他參數

<html lang="en">
<head><meta charset="utf-8"><style>button {margin: 10px;}div {color: blue;font-weight: bold;}span {color: red;}</style><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body><button>Button #1</button><button>Button #2</button><div><span>0</span> button #1 clicks.</div><div><span>0</span> button #2 clicks.</div><script>$( "button" ).first().on( "click", function() {update( $( "span" ).first() );} );$( "button" ).last().on( "click", function() {$( "button" ).first().trigger( "click" );update( $( "span" ).last() );} );function update( j ) {var n = parseInt( j.text(), 10 );j.text( n + 1 );}</script>
</body>
</html>

在這里插入圖片描述

五、效果

5.1 隱藏/顯示

通過hide(speed,callback)方法來隱藏HTML元素，show(speed,callback)方法來顯示HTML元素

speed：隱藏/顯示的速度，可取slow、fast或者毫秒數

callback：隱藏/顯示完成后所執行的函數

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "button.hide" ).click(function() {$( "p" ).hide();});$( "button.show" ).click(function() {$( "p" ).show();});});</script></head><body><p >Hello world!</p><button class="hide">Hide</button><button class="show">Show</button></body>
</html>

在這里插入圖片描述

使用speed參數來看一下效果：

speed參數	效果
`speed=1000`

`speed="fast"`

`speed="slow"`

除此之外，也可以使用toggle(speed,callback)方法來切換hide()和show()方法：

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "button.hide" ).click(function() {$( "p" ).hide(speed="slow");});$( "button.show" ).click(function() {$( "p" ).show(speed="slow");});$( "button.toggle" ).click(function() {$( "p" ).toggle(speed="slow"); })});</script></head><body><p >Hello world!</p><button class="hide">Hide</button><button class="show">Show</button><button class="toggle">Toggle</button></body>
</html>

在這里插入圖片描述

5.2 淡入淡出

fadeIn(speed,callback)方法來實現淡入已隱藏的元素

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "button.hide" ).click(function() {$( "p" ).hide(speed="slow");});$( "button.FadeIn" ).click(function() {$( "p" ).fadeIn(speed="slow");});});</script></head><body><p >Hello world!</p><button class="FadeIn">FadeIn</button><button class="hide">Hide</button></body>
</html>

在這里插入圖片描述

fadeOut(speed,callback)用于淡出可見元素

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "button.FadeOut" ).click(function() {$( "p" ).fadeOut(speed="slow");});});</script></head><body><p >Hello world!</p><button class="FadeOut">FadeOut</button></body>
</html>

在這里插入圖片描述

fadeToggle(speed,callback)方法可以在fadeIn方法和fadeOut方法切換

<html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$( window ).on( "load", function() {$( "button.FadeToggle" ).click(function() {$( "p" ).fadeToggle(speed="slow");});});</script></head><body><p >Hello world!</p><button class="FadeToggle">FadeToggle</button></body>
</html>

在這里插入圖片描述

fadeTo(speed,opacity,callback)允許漸變為給定的不透明度

opacity：將淡入淡出效果設置為給定的不透明度，值介于0到1之間

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeTo("slow",0.15);$("#div2").fadeTo("slow",0.4);$("#div3").fadeTo("slow",0.7);});});</script></head><body><button>點我讓顏色變淡</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div></body>
</html>

在這里插入圖片描述

5.3 滑動

slideDown(speed,callback)用于向下滑動元素

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".SlideDown").click(function(){$("#div1").slideDown(1000);});$("#div1").hide(); // 初始隱藏div1});</script></head><body><button class ="SlideDown">點擊這里，向下滑動圖片</button><div id="div1" style="background-color:red;height:100px;width:300px;"></body>
</html>

在這里插入圖片描述

slideUp(speed,callback)向上滑動元素

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".SlideUp").click(function(){$("#div1").slideUp(1000);});});</script></head><body><button class ="SlideUp">點擊這里，向上滑動圖片</button><div id="div1" style="background-color:red;height:100px;width:300px;"></body>
</html>

在這里插入圖片描述

slideToggle(speed,callback)可以在slideDown方法和slideUp方法之間進行切換

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".SlideToggle").click(function(){$("#div1").slideToggle(1000);});});</script></head><body><button class ="SlideToggle">點擊這里，滑動圖片</button><div id="div1" style="background-color:red;height:100px;width:300px;"></body>
</html>

在這里插入圖片描述

5.4 動畫

animate({params},speed,callback)用于創建自定義動畫

{params}：定義形成動畫的CSS屬性，屬性名使用Camel標記法，例如使用paddingLeft而不是padding-left，同時顏色動畫需要從官網下載。

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".animate").click(function(){$("#div1").animate({width:'100px'}, 1000);});});</script></head><body><button class ="animate">動畫實現</button><div id="div1" style="background-color:red;height:100px;width:300px;"></body>
</html>

在這里插入圖片描述

{params}也可以使用相對值（相對于元素的當前值），有+=或者-=

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".animate").click(function(){$("#div1").animate({width:'+=100px'}, 1000, function(){// 動畫完成時的回調函數$("#div1").animate({width:'300px'}, 1000);});});});</script></head><body><button class ="animate">動畫實現</button><div id="div1" style="background-color:red;height:100px;width:300px;"></body>
</html>

在這里插入圖片描述

{params}也可以使用預定義的值，有show、hide、toggle

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".animate").click(function(){$("#div1").animate({height:'toggle'}, 1000);});});</script></head><body><button class ="animate">動畫實現</button><div id="div1" style="background-color:red;height:100px;width:300px;"></body>
</html>

在這里插入圖片描述

animate方法可以使用隊列功能，對同一個元素可以應用多個動畫，按順序執行

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".animate").click(function(){$("#div1").animate({height:'toggle'}, 1000);$("#div1").animate({width:'toggle'}, 1000);$("#div1").animate({opacity:'0.4'}, 1000);});});</script></head><body><button class ="animate">動畫實現</button><div id="div1" style="background-color:red;height:100px;width:300px;"></body>
</html>

在這里插入圖片描述

停止動畫：stop(stopAll,goToEnd)

stopAll：是否應該清除動畫隊列，默認為False，僅停止當前活動的動畫，接著執行隊列中下一個動畫。

goToEnd：是否立即完成當前動畫，默認為False

參數	效果
`stop(true,true)`

`stop(true,false)`

`stop(false,true)`

`stop(false,false)`

六、鏈

允許在一條語句里對同一個元素運行多個jQuery方法

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

七、HTML

7.1 內容/屬性

text([text])方法用來設置或返回所選元素的文本內容

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".set").click(function(){$("#div1 p").text("<b>hello world</b>");});$(".show").click(function(){alert($("#div1 p").text());})});</script></head><body><div id="div1"><p>hello</p></div><div id="div2"><p>world</p></div><button class="set">set text</button><button class="show">show text</button></body>
</html>

在這里插入圖片描述

html([htmlString])方法不適用于XML文檔，可以設置或返回所選元素的內容，包括HTML標簽

在這里插入圖片描述

val([value])方法主要用于獲取和設置表單元素

在這里插入圖片描述

獲取屬性： attr()方法，相比于prop方法他可以獲取自定義屬性

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".show").click(function(){alert($("#link1").attr("href"));})$(".set").click(function(){$("#link1").attr("href","http://www.sina.com.cn");alert($("#link1").attr("href")); })});</script></head><body><div id="div1"><a href="http://www.baidu.com" id="link1">hello</a></div><button class="show">show href</button><button class="set">set href</button></body>
</html>

在這里插入圖片描述

7.2 元素操作

方法一覽	描述
`append(content[,content])`	在被選元素的結尾插入內容
`prepend(content[,content])`	在被選元素的開頭插入內容
`after(content[,content])`	在被選元素之后插入內容
`before(content[,content])`	在被選元素之前插入內容
`remove([selector])`	刪除被選元素及其子元素
`selector`	可以過濾被刪除的元素
`empty`	從被選元素中刪除子元素

????????????????增加元素???????????????

append、prepend、before、after方法的用法都相似，只不過插入的位置不同

以append方法舉例，append方法將指定內容作為每個元素的最后一個子元素插入

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".set").click(function(){$(".inner").append("<p>world</p>");})});</script></head><body><h2>Greetings</h2><div class="container"><div class="inner">Hello</div><div class="inner">Goodbye</div></div><button class="set">set</button></body>
</html>

在這里插入圖片描述

除此之外append方法也會將HTML屬性附加到段落上：

<html><head><meta charset="utf-8"><style>.inner{background-color: yellow;}</style></style><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$(".set").click(function(){$(".inner").append("<p>world</p>");})});</script></head><body><h2>Greetings</h2><div class="container"><div class="inner">Hello world</div></div><button class="set">set</button></body>
</html>

在這里插入圖片描述

????????????????刪除元素???????????????

empty方法和remove方法的區別：

remove方法將刪除與元素關聯的所有綁定事件和jQuery數據

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").remove();});});</script></head><body><div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">這是 div 中的一些文本。<p>這是在 div 中的一個段落。</p><p>這是在 div 中的另外一個段落。</p></div><br><button>清空div元素</button></body>
</html>

在這里插入圖片描述

可以將選擇器作為可選參數包含在內，效果都是一樣的：

<script>$(document).ready(function(){$("button").click(function(){$("div").remove("div#div1");});});
</script>

而empty方法會移除目標元素所有子節點，但不會刪除目標元素本身和它綁定的數據或事件

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").empty();});});</script></head><body><div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">這是 div 中的一些文本。<p>這是在 div 中的一個段落。</p><p>這是在 div 中的另外一個段落。</p></div><br><button>清空div元素</button></body>
</html>

在這里插入圖片描述

7.3 類屬性

方法一覽	描述
`addClass(className)`	向被選元素添加一個或多個類
`removeClass(className)`	從被選元素刪除一個或多個類
`toggleClass(className)`	對被選元素進行添加/刪除類的切換操作

介紹一下addClass、removeClass、toggleClass的使用：

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></script><script>$(document).ready(function(){$(".add").click(function(){$("h1,h2,p").addClass("b");$("div").addClass("a");});$(".remove").click(function(){$("h1,h2,p").removeClass("b");$("div").removeClass("a");});$(".toggle").click(function(){$("h1,h2,p").toggleClass("b");$("div").toggleClass("a");})});</script><style type="text/css">.a{font-weight:bold;font-size:xx-large;}.b{color:palevioletred;}</style></head><body><h1>標題 1</h1><h2>標題 2</h2><p>這是一個段落。</p><p>這是另外一個段落。</p><div>這是一些重要的文本!</div><br><button class="add">添加 class</button><button class="remove">移除 class</button><button class="toggle">切換 class</button></body>
</html>

在這里插入圖片描述

7.4 樣式屬性

????????????????css樣式???????????????

css方法可以返回或者設置元素的一個或多個樣式

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></script><script>$(document).ready(function(){$(".set").click(function(){$("div").css("color","yellow");});$(".show").click(function(){alert($("div").css("color"));})});</script><style type="text/css">.a{font-weight:bold;font-size:xx-large;color: blueviolet;}.b{color:palevioletred;}</style></head><body><h1 class="b">標題 1</h1><div class="a">這是一些重要的文本!</div><br><button class="set">設置顏色</button><button class="show">展示顏色</button></body>
</html>

在這里插入圖片描述

????????????????尺寸?????????????????

jQuery尺寸大致布局：

方法一覽	描述
`width(width)`	設置或返回元素的寬度，不包括內邊距、邊框或外邊距
`height(height)`	設置或返回元素的高度，不包括內邊距、邊框或外邊距
`innerWidth`	返回元素上的寬度，包括內邊距
`innerHeight`	返回元素上的高度，包括內邊距
`outerWidth`	返回元素上的寬度，包括內邊距和邊框
`outerHeight`	返回元素上的高度，包括內邊距和邊框

width和height的參數值可以設置為數字、父元素寬度的比例、回調函數。

$("#element").width(200);        // 設置為 200px
$("#element").width("50%");       // 設置為父元素寬度的 50%
$("#element").width(function(index, currentWidth) {return currentWidth + 10;       // 動態調整寬度
});

除此之外，還可以獲取窗口與文檔的尺寸

窗口尺寸：$(window).width()、$(window).height()
文檔尺寸：$(document).width()、$(document).height()

總結一下：

????????????????坐標?????????????????

offset和position方法的區別：

offset獲取第一個匹配元素的當前坐標或者設置匹配元素相對于文檔的坐標

獲取元素位置時，他會返回包含top和left屬性的對象

const position = $("#myElement").offset();
console.log("Top:", position.top, "Left:", position.left);
// 輸出結果：Top: 200, Left: 300

設置元素位置時，格式為offset({top:value,left:value})

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></script><script>$(document).ready(function(){$(".set").click(function(){$("div").offset({top: 20,left: 50})
});});</script><style type="text/css">.a{font-weight:bold;font-size:xx-large;color: blueviolet;}</style></head><body><div class="a">這是一些重要的文本!</div><br><button class="set">設置位置</button></body>
</html>

在這里插入圖片描述

7.5 遍歷dom

????????????????遍歷祖先????????????????

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></script><script>$(document).ready(function(){$(".show-parent").click(function(){$(".child").parent().css("background-color","rgb(255, 0, 0)");});$(".show-parents").click(function(){$(".child").parents().css("background-color","rgb(3, 255, 0)");}); $(".show-parentuntil").click(function(){$(".child").parentsUntil(".a").css("background-color","#67cdf8");});});  </script><style>.a{width: 500px;height: 500px;background-color: rgb(163, 221, 246);}.parent{width: 200px;height: 200px;background-color: rgb(242, 133, 133);}.parents{width: 300px;height: 300px;background-color: rgb(140, 218, 140); }.child{width: 100px;height: 100px;background-color: rgb(156, 156, 241);}</style></head><body><div class="a"><div class ="parents"><div class="parent"><span class="child">haha</span><p></p></div></div></div><button class="show-parent">展示parent</button><button class="show-parents">展示parents</button><button class="show-parentuntil">展示parentuntil</button></body>
</html>

在這里插入圖片描述

????????????????遍歷后代????????????????

????????????????遍歷同胞????????????????

<html><head><meta charset="utf-8"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></script><script>$(document).ready(function(){$(".menu-header").click(function(){$(this).next(".menu-content").slideToggle();$(this).toggleClass("active");});  });</script><style>.menu {width: 250px;font-family: Arial, sans-serif;}.menu-title {padding: 10px;background-color: #2c3e50;color: white;font-weight: bold;margin-top: 5px;}.menu-header {padding: 8px 10px;background-color: #3498db;color: white;cursor: pointer;position: relative;}.menu-header:after {content: "+";position: absolute;right: 10px;}.menu-header.active:after {content: "-";}.menu-content {display: none;padding: 5px 0;background-color: #f9f9f9;}.sub-item {padding: 6px 15px;color: #333;}.sub-item:hover {background-color: #e0e0e0;}</style></head><body><div class="menu"><div class="menu-title">主菜單</div><div class="menu-item"><div class="menu-header">菜單項1</div><div class="menu-content"><div class="sub-item">子項1-1</div><div class="sub-item">子項1-2</div></div></div><div class="menu-item"><div class="menu-header">菜單項2</div><div class="menu-content"><div class="sub-item">子項2-1</div><div class="sub-item">子項2-2</div><div class="sub-item">子項2-3</div></div></div><div class="menu-title">其他菜單</div><div class="menu-item"><div class="menu-header">菜單項3</div><div class="menu-content"><div class="sub-item">子項3-1</div></div></div></div></body>
</html>