手風琴選單欄 外掛程式

需要檔案jquery.accordion.css和jquery.accordion.js。

jquery.accordion.css：

1

.accordion h5 
12.accordion h5.active_h5
15.accordion ul
21.accordion ul.menu_last
24.accordion ul li
27.accordion li.sub_li
30.accordion ul li a
3940
.accordion .arrow_right,.accordion .arrow_down
52.accordion .arrow_down

1 $.fn.accordion=function

());
1011     h5title.each(function
(index)
22return idx!=n;
23             }).removeclass('active_h5')
24               .find('span').removeclass('arrow_down')
25               .parent().siblings('ul').slideup();
2627
//點選標題時，改變標題樣式、改變箭頭方向、設定動畫
28             $(this).addclass('active_h5')
29                    .find('span').toggleclass('arrow_down')
30                    .parent().siblings('ul').stop(true,true).slidetoggle(); //
防止連續多次點選，一直產生動畫。
3132
});33
});34 };

1

<
div 
class
="accordion"
>
2<
div>
3<
h5>駕校管理
h5>
4<
ul>
5<
li><
a href
="#"
>新增駕校
a>
li>
6<
li><
a href
="#"
>駕校管理
a>
li>7ul
>
8div
>
9<
div>
10<
h5>賬號管理
h5>
11<
ul>
12<
li><
a href
="#"
>新增賬號
a>
li>
13<
li><
a href
="#"
>賬號管理
a>
li>
14ul
>
15div
>
16<
div>
17<
h5h5
>
18<
ul class
="menu_last"
>
19<
li><
a href
="#"
>選單管理
a>
li>
20<
li><
a href
="#"
>歡迎訊息
a>
li>
21<
li class
="sub_li"
>
22<
div>
23<
h5 class
="sub_h5"
>文章管理
h5>
24<
ul class
="menu_last"
>
25<
li><
a href
="#"
>發表文章
a>
li>
26<
li><
a href
="#"
>文章管理
a>
li>
27ul
>
28div
>
29li
>
30ul
>
31div
>
32div
>

1 $(function

());

自製jQuery外掛程式 手風琴二級選單

製作了乙個用jquery外掛程式形式實現的手風琴二級選單 html5結構要求 一級選單 二級選單 二級選單 二級選單 一級選單 二級選單 二級選單 二級選單 一級選單 二級選單 二級選單 二級選單 在body末尾使用jquery找到父標籤並呼叫外掛程式函式 匯入accordion css.css檔案...

手風琴效果

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