這篇文章主要介紹了jquery實現簡單手風琴菜單效果的方法,實例分析了jQuery操作頁面樣式、html頁面布局及SCSS樣式設置的相關技巧,需要的朋友可以參考下

本文實例講述了jquery實現簡單手風琴菜單效果的方法。分享給大家供大家參考。具體實現方法如下：

1. (function($) { 
2. var allPanels = $('.accordion > dd').hide(); 
3. $('.accordion > dt > a').click(function() { 
4. allPanels.slideUp(); 
5. $(this).parent().next().slideDown(); 
6. return false; 
7. }); 
8. })(jQuery); 

HTML代碼：

1. <dl class="accordion"> 
2. <dt><a href="">Panel 1</a></dt> 
3. <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd> 
4. <dt><a href="">Panel 2</a></dt> 
5. <dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd> 
6. <dt><a href="">Panel 3</a></dt> 
7. <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd> 
8. </dl> 

CSS部分：

1. /* Sorry if you don't use SASS. Should be pretty easy to convert. */ 
2. .accordion { 
3. margin: 50px;  
4. dt, dd { 
5. padding: 10px; 
6. border: 1px solid black; 
7. border-bottom: 0; 
8. &:last-of-type { 
9. border-bottom: 1px solid black; 
10. } 
11. a { 
12. display: block; 
13. color: black; 
14. font-weight: bold; 
15. } 
16. } 
17. dd { 
18. border-top: 0; 
19. font-size: 12px; 
20. &:last-of-type { 
21. border-top: 1px solid white; 
22. position: relative; 
23. top: -1px; 
24. } 
25. } 
26. } 

希望本文所述對大家的jQuery程序設計有所幫助。