jQuery-ui中的手风琴效果

最新推荐文章于 2025-05-13 14:31:31 发布

原创最新推荐文章于 2025-05-13 14:31:31 发布 · 668 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#stylesheet #javascript #function #div #header #ui

本文介绍了一种使用jQuery UI插件实现的手风琴效果。通过简单的HTML结构配合jQuery UI的Accordion组件，可以轻松创建交互式的折叠面板。文章提供了基本的代码示例，包括必要的JavaScript和CSS文件引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手风琴效果实现思路

在body中书写下面的div，content的内容可以根据需要复制任意个

           <div id=content>
               <h3><a href="#">First</a></h3>
               <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>

</div>

...........

</div>

引用js和css

$(function (){

   $("#accordion").accordion({

       header: "h3",//这里的字号可以任意改变，根据div中的改变
       animated: "bounceslide" ,//动画
       event: "mouseover",//鼠标放上去，选中，默认值是clike
       change: function(event, ui){

           }
       });