jQuery手風琴製作

2022-07-23 10:30:35 字數 677 閱讀 6622

在製作手風琴中主要用到jquery中的幾個方法:

1.siblings(),主要用來搜尋同輩的元素,不包括自己。

div

效果如下:

2. slidedown(speed,[fn]),向上滑動,slideup(speed,[fn]),向下滑動,滑動效果

speed設定滑動效果的時長,可以是「show」,「normal」,「fast」中的其中一種,還可以是毫秒數值(1000)。

3. parent([expr]),取得乙個包含著所有匹配元素的唯一父元素的元素集合。其中的expr為可選,可以寫你要選擇的特定的元素

children([expr]),取得乙個包含匹配的元素集合中每乙個元素的所有子元素的元素集合。其中的expr為可選,可以寫你要選擇的特定的元素

最後來看整個手風琴則製作:

css樣式:

/*初始化*/*ul

li>div

li>span

html和jquery**:

將css的樣式匯入

將封裝好的資料庫匯入

最後是效果圖:

jQuery手風琴製作

接下來我們就開始製作了,首先,我們要做的就是排版,如下 工作 汽車房子 美女然後就是寫css樣式 最後,就該我們的重點了,jquery 注釋 nextall 查詢當前元素之後所有的同輩元素。slidedown 通過高度變化 向下增大 來動態地顯示所有匹配的元素。end 將匹配的元素列表變為前一次的狀...

手風琴效果

今天寫了乙個類似手風琴的效果,基於jquer,貼出來分享,生命在於折騰,加油。function imgshowleft else 3000 imgshowleft li on mouseover function if this hasclass active imgshowleft li on m...

手風琴案例

lang en charset utf 8 title type text css ul parentwrap menugroup grouptitle menugroup div style src js jquery 1.12.4.js script head class parentwrap ...