开发者社区> ghost丶桃子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery-可折叠的模式

简介:
+关注继续查看

jQuery:

复制代码
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {

            $(".accordion h3:first").addClass("active");
            $(".accordion p:not(:first)").hide();

            $(".accordion h3").click(function () {
                $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
                $(this).toggleClass("active");
                $(this).siblings("h3").removeClass("active");
            });

        });
    </script>
复制代码

HMTL:

复制代码
<div class="accordion">
        <h3 class="">
            Question One Sample Text</h3>
        <p style="display: none;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante
            at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros.
            Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
        <h3 class="">
            This is Question Two</h3>
        <p style="display: none;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante
            at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros.
            Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
        <h3 class="">
            Another Questio here</h3>
        <p style="display: none;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante
            at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros.
            Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
        <h3 class="">
            Sample heading</h3>
        <p style="display: none;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante
            at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros.
            Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
        <h3 class="">
            Sample Question Heading</h3>
        <p style="display: none;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante
            at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros.
            Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    </div>
复制代码

CSS;

复制代码
/* File Created: 六月 4, 2012 */
body
{
    /*div居中*/
    margin: 30px auto;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion
{
    width: 570px;
    border-bottom: solid 1px #c4c4c4;
}
.accordion h3
{
    background: #e9e7e7 url(../images/according/arrow-square.gif) no-repeat right -51px;
    padding: 7px 15px;
    margin: 0;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    border: solid 1px #c4c4c4;
    border-bottom: none;
    cursor: pointer;
}
.accordion h3:hover
{
    background-color: #e3e2e2;
}
.accordion h3.active
{
    background-position: right 5px;
}
.accordion p
{
    background: #f7f7f7;
    margin: 0;
    padding: 10px 15px 20px;
    border-left: solid 1px #c4c4c4;
    border-right: solid 1px #c4c4c4;
}
复制代码

 


作者:望月狼
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.http://www.cnblogs.com/wangyuelang0526/archive/2012/06/04/2534675.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1228 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1062 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1344 0
1955
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载