jQuery UI之手风琴

来源：互联网发布：鸟哥linux私房当当菜编辑：程序博客网时间：2024/05/17 01:06

1、实现源码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>手风琴</title><link rel="stylesheet" href="../js/jquery-ui-1.10.4/development-bundle/themes/base/jquery.ui.all.css"><script src="../js/jquery-ui-1.10.4/development-bundle/jquery-1.10.2.js"></script><script src="../js/jquery-ui-1.10.4/development-bundle/ui/jquery.ui.core.js"></script><script src="../js/jquery-ui-1.10.4/development-bundle/ui/jquery.ui.widget.js"></script><script src="../js/jquery-ui-1.10.4/development-bundle/ui/jquery.ui.accordion.js"></script><link rel="stylesheet" href="../js/jquery-ui-1.10.4/development-bundle/demos/demos.css"><style>    .accordion{       background: fuchsia;    }</style><script>    $(function(){    $("#accord").accordion();        //设置Accordion背景色    $("#accord").addClass("accordion");    });</script></head><body>   <div id="accord"><h3>苹果</h3><div>    <h4>苹果</h4></div><h3>橘子</h3><div>    <h4>橘子</h4></div><h3>梨子</h3><div>   <h4>梨子</h4></div>   </div></body></html>

2、实现结果

0 1