jQuery手風琴製作

2021-09-16 21:16:47 字數 590 閱讀 7630

接下來我們就開始製作了,首先,我們要做的就是排版,**如下:

工作

汽車房子

美女

然後就是寫css樣式:

最後,就該我們的重點了,jquery:

注釋:nextall(),查詢當前元素之後所有的同輩元素。

slidedown(),通過高度變化(向下增大)來動態地顯示所有匹配的元素。

end(),將匹配的元素列表變為前一次的狀態。

parent(),取得乙個包含著所有匹配元素的唯一父元素的元素集合。

siblings(),取得乙個包含匹配的元素集合中每乙個元素的所有唯一同輩元素的元素集合。可以用可選的表示式進行篩選。

children(""),取得乙個包含匹配的元素集合中每乙個元素的所有子元素的元素集合。

hide(),隱藏顯示的元素。

完成了這幾步之後,我們的手風琴選單就出來了,來看一下我們的效果吧!

jQuery手風琴製作

在製作手風琴中主要用到jquery中的幾個方法 1.siblings 主要用來搜尋同輩的元素,不包括自己。div 效果如下 2.slidedown speed,fn 向上滑動,slideup speed,fn 向下滑動,滑動效果 speed設定滑動效果的時長,可以是 show normal fast...

手風琴效果

今天寫了乙個類似手風琴的效果,基於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 ...