如何使用jQuery制作可折叠的菜单效果？

本文共计1130个文字，预计阅读时间需要5分钟。

今天为大家介绍如何使用jQuery创建折叠式菜单（accordion）。这种效果类似于常说的手风琴效果（accordion effect）。

实现效果如下：

+ 一、HTML代码结构 要实现折叠式菜单，需要以下HTML结构：

菜单项1 内容1 菜单项2 内容2

+ 二、CSS样式 为了使菜单看起来更美观，可以添加以下CSS样式：

css .accordion li { list-style-type: none; border: 1px solid #ccc; margin-bottom: 5px; } .accordion a { display: block; padding: 10px; text-decoration: none; color: #333; } .accordion div { display: none; padding: 10px; border-top: 1px solid #ccc; }

+ 三、jQuery代码 使用jQuery来控制菜单的折叠效果：

javascript $(document).ready(function() { $('.accordion li').click(function() { $(this).find('div').slideToggle(); $(this).toggleClass('active'); }); });

以上代码即可实现一个简单的折叠式菜单效果。

今天给大家介绍如何使用jQuery创建折叠式菜单，即通常所说的手风琴效果（accordion[əˈkɔ:rdiən]）。