jquery实现简单手风琴菜单效果实例
网络编程 2021-07-04 21:48www.168986.cn编程入门
这篇文章主要介绍了jquery实现简单手风琴菜单效果的方法,实例分析了jQuery操作页面样式、html页面布局及SCSS样式设置的相关技巧,需要的朋友可以参考下
本文实例讲述了jquery实现简单手风琴菜单效果的方法。分享给大家供大家参考。具体实现方法如下:
(function($) { var allPanels = $('.aordion > dd').hide(); $('.aordion > dt > a').click(function() { allPanels.slideUp(); $(this).parent().next().slideDown(); return false; }); })(jQuery);
HTML代码:
<dl class="aordion"> <dt><a href="">Panel 1</a></dt> <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd> <dt><a href="">Panel 2</a></dt> <dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd> <dt><a href="">Panel 3</a></dt> <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> </dl>
SCSS部分:
/* Sorry if you don't use SASS. Should be pretty easy to convert. */ .aordion { margin: 50px; dt, dd { padding: 10px; border: 1px solid black; border-bottom: 0; &:last-of-type { border-bottom: 1px solid black; } a { display: block; color: black; font-weight: bold; } } dd { border-: 0; font-size: 12px; &:last-of-type { border-: 1px solid white; position: relative; : -1px; } } }
希望本文所述对大家的jQuery程序设计有所帮助。
上一篇:jquery实现简单的自动播放幻灯片效果
下一篇:jQuery实现的五子棋游戏实例
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程