13.jQuery UI 折叠菜单UI

最新推荐文章于 2023-04-10 08:54:32 发布

初心始终钰

最新推荐文章于 2023-04-10 08:54:32 发布

阅读量2.6k

点赞数

分类专栏： jQuery UI

本文链接：https://blog.csdn.net/qq_16430735/article/details/38473979

版权

本文介绍了如何使用jQuery UI创建折叠菜单（accordion），包括基本使用方法、样式修改以及accordion方法的属性和事件。通过示例代码展示如何设置选项和响应式回调函数，以适应不同状态和网站主题。

摘要由CSDN通过智能技术生成

折叠菜单（accordion），和选项卡一样也是一种在同一个页面上切换不同内容的功

能UI。它和选项卡的使用几乎没有什么太大区别，只是显示的效果有所差异罢了。

一．使用accordion

使用accordion 比较简单，但需要按照指定的规范即可。

html :

<div id="accordion">

   <h1>菜单1</h1>
   <div>内容1</div>
   <h1>菜单2</h1>
   <div>内容2</div>
   <h1>菜单3</h1>
   <div>内容3</div>

</div>

jQuery :

$('#accordion').accordion();

二．修改accordion 样式

在显示的accordion 折叠菜单中，在火狐浏览器中打开Firebug 或者右击->查看元素。

这样，可以看看accordion 的样式，根据样式进行修改。为了和网站主题符合，对accordion

的标题背景进行修改。

//无须修改ui 里的CSS，直接用style.css 替代掉
.ui-widget-header {

   background:url(../img/xxx.png);

}

三．accordion()方法的属性

选项卡方法有两种形式：1.accordion(options)，options 是以对象键值对的形式传

参，每个键值对表示一个选项；2.accordion('action', param)，action 是操作选项卡

方法的字符串，param 则是options 的某个选项。

accordion 外观选项
属性	默认值/类型	说明

关注

专栏目录