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

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

时间: 2024-10-29 01:20:00

jQuery-可折叠的模式的相关文章

jquery采用oop模式class类的使用示例_jquery

本文实例讲述了jquery采用oop模式class类的使用方法.分享给大家供大家参考,具体如下: 这里用class来管理jquery的各个function,我觉得很方便,并且代码可读性也很强.以前我喜欢建文件写function,再包括文件,到后来找一个function就比较麻烦了.没有用class来管理function方便.费话不多说了. 一.oop.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

jQuery实例教程:制作网页中可折叠的面板

文章简介:jQuery可折叠的面板效果. 让我们结合之前几个例子的技巧,然后制作一个可折叠的面板.要实现下面的效果需要调用slideDown()方法和slideUp()两个方法. 实现该示例的核心jQuery代码: $(document).ready(function () { $(".message_list .message_body:gt(0)").hide(); $(".message_list li:gt(4)").hide(); $(".mes

Web设计师值得收藏的10个jQuery特效

jQuery已经不是什么新鲜的事儿,以前总把它认为是非常难的东西,也就没有认真去了解他了.直到学完CSS的大部分内容,才开始接触这种"write less, do more" 的Javascrīpt框架.这篇文章的最重要内容是来自Web Designer Wall的一篇教程,一篇包含了10个jQuery特效的教程.这里不打算全文翻译,想以自己的语言来表达,或许这样更方便大家理解/自己以后学习,也可能更准确地描述. 先试试看?特效实例: View jQuery Demos:http://

深入分析jQuery的ready函数是如何工作的(工作原理)_jquery

本文深入分析jQuery的ready函数是如何工作的.分享给大家供大家参考,具体如下: jQuery 是一个伟大的脚本库,由 John Resig 在 2006年1月的BarCamp NYC上释出第一个版本.你可以在 http://jquery.com/ 下载到最新版本,截止本文发布为止已更新到jQuery 2.1.4版.这里以jQuery1.8.3为例分析. 学习 jQuery 有许多途径,我们今天从 jQuery 的 ready 函数开始.本例中的代码都来自于 jQuery 脚本库. 如果你

CKEditor无法验证的解决方案(js验证+jQuery Validate验证)_jquery

最近项目的前端使用了jQuery,表单的前端验证用的是jQuery Validate,用起来很简单方便,一直都很满意的. 前段时间,根据需求为表单中的 textarea 类型的元素加上了html富文本编辑器,用的是CKEditor,功能强大,定制方便,也很满意. 不过用CKEditor增强过的 textarea 元素,这个字段要求是非空的,在jQuery Validate总是验证不通过,原因就是在 CKEditor 编辑器填写了内容之后,编辑器并不是立即把内容更新到原来的 textarea 元素

jQuery技巧之让任何组件都支持类似DOM的事件管理_jquery

本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法来管理普通对象的事件就跟管理DOM对象的事件一模一样,虽然在最后当你看到这个小技巧的具体内容时,你可能会觉得原来如此或者不过如此,但是我觉得如果能把普通的发布-订阅模式的实现改成DOM类似的事件机制,那开发出来的组件一定会有更大的灵活性和扩展性,而且我也是第一次使用这种方法(见识太浅的原因),觉得它

jQuery bind事件使用详解_jquery

使用jquery也有近1年了,今天在看国外大牛代码突然发现一个地方没看明白,代码如下 $(window).bind('load.jcarousel', function() { windowLoaded = true; }); 也许我对jQuery的了解不多吧,自己也就看过一本jQuery的入门书,然后总是在工作中学习,碰着问题了就总结一点,学习一点...嘿嘿,也许为什么动不动公司招人就是1年以上工作经验什么的,确实实战才是能让人最快速提高的. 找到jQuery API,解释如下: 1.一次可以

举例详解JavaScript中Promise的使用

  这篇文章主要介绍了JavaScript中Promise的使用,特别jQuery的promise使用是当下开发圈中的热门,需要的朋友可以参考下 摘录 – Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式,那么这意味着什么呢,读完下文你就了解了. "Promises" 代表着在javascript程序里下一个伟大的范式,但是理解他们为什么如此伟大不是件简单的事.它的核心就是一个promise代表一个任务结果,这个任务有可能完成

标签-使用kindedit在线编辑器后怎么判断文本域不能为空

问题描述 使用kindedit在线编辑器后怎么判断文本域不能为空 HTML页面代码 JS代码 KindEditor.ready(function(K) { window.editor = K.create('#editor_id'); var options = { cssPath : '/css/index.css', filterMode : true }; var editor = K.create('textarea[name="con"]', options); // 取得H

AMD加载器实现笔记(四)

继续这一系列的内容,到目前为止除了AMD规范中config的map.config参数外,我们已经全部支持其他属性了.这一篇文章中,我们来为增加对map的支持.同样问题,想要增加map的支持首先要知道map的语义. 主要用于解决在两个不同模块集中使用一个模块的不同版本,并且保证两个模块集的交互没有冲突. 假设磁盘有如下文件: 当'some/newmodule'请求'foo'模块时,它将从foo1.2.js总得到'foo1.2'模块:当'some/oldmodule'请求'foo'模块时它将从foo