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

文章简介:jQuery可折叠的面板效果。

让我们结合之前几个例子的技巧,然后制作一个可折叠的面板。要实现下面的效果需要调用slideDown()方法和slideUp()两个方法。

实现该示例的核心jQuery代码:

$(document).ready(function () {
    $(".message_list .message_body:gt(0)").hide();
    $(".message_list li:gt(4)").hide();
    $(".message_head").click(function () {
        $(this).next(".message_body").slideToggle(500)
        return false;
    });
    $(".collpase_all_message").click(function () {
        $(".message_body").slideUp(500)
        return false;
    });
    $(".show_all_message").click(function () {
        $(this).hide()
        $(".show_recent_only").show()
        $(".message_list li:gt(4)").slideDown()
        return false;
    });
    $(".show_recent_only").click(function () {
        $(this).hide()
        $(".show_all_message").show()
        $(".message_list li:gt(4)").slideUp()
        return false;
    });
});

第1行:将<div class=”message_body”>中的所有元素隐藏,第一个除外

第2行:将第五个后面的所有<li>元素隐藏

第3部分:当用户点击 <p class=”message_head”> 时,对下一个<div class=”message_body”>进行下拉显示操作。

第4部分:<a class=”collpase_all_message”>点击是,将所有<div class=”message_body”>元素折叠起来。

第5部分:当<a class=”show_all_message”>,显示<a class=”show_recent_only”>,以及将第五个<li>元素后面的所有元素下来显示出来。

第6部分:当点击<a class=”show_recent_only”>,隐藏被元素,然后显示<a class=”show_all_message”>,并将第5个<li>后面的所有<li>元素折叠隐藏起来。

 

http://www.webjx.com/files/soft/1_120303222535.zip

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索折叠
, return
, function
, 元素
, click
, false
, 可折叠面板
, 部分
, slideUp
, 折叠面板
, jquery折叠菜单
, 可折叠
, 行折叠
slideUp()
,以便于您获取更多的相关知识。

时间: 2024-10-05 04:51:35

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

dreamweaver做网页实例教程 制作弹出菜单

  效果说明 本实例所要完成的效果是当鼠标移动到文字上时,就会弹出一个漂亮的菜单,如图 17-1 和图 17-2 所示. 创作思想 本实例首先在网页中输入一行文字,并对文字做一个特殊的超链接,然后利用 Dreamweaver MX 2004 自带的行为制作弹出菜单. 操作步骤 ( 1 )输入文字并设置超链接.在网页中输入文字,因为单独的文本文字是无法添加行为的,按照 Dreamweaver 中的约定,将文字的超链接设置为" javascript:; "才能够添加行为.所以将文字的超链接

Illustrator结合photoshop制作网页中的超漂亮的3D立体文字教程

给各位Illustrator软件的使用者们来详细的解析分享一下结合photoshop制作网页中的超漂亮的3D立体文字的教程. 教程分享: 先来看看最终的效果图!吧:   好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的结合photoshop制作网页中的超漂亮的3D立体文字的教程解析分享的全部内容了,各位看到这里的使用者们相信各位现在是很清楚了制作方法了吧,那么各位就快去按照小编的教程去制作下自己想要的3D立体字吧.

Fireworks实例教程制作:燃烧效果制作

  现在FireworksMX新功能提供了很强的像素图处理能力,试着用其中的涂抹.淡化等工具制作燃烧效果,一样很不错.下文是Fireworks实例教程制作 :燃烧效果制作的范例,供大家参考学习. 制作步骤: 一.首先建立一个500X400的画布,因为需要涂抹,范围太小不好操作,填为黑色,如下图: 二.在制作燃烧文字之前,我们先练习制作一组火苗,这对理解火焰的走势有帮助.如下图,拖画三个椭圆形,分别填充为黄.橙.红色,调整大小位置,做下图的排列,这样形成焰芯.内焰.外焰的轮廓. 将它们群组,复制几

详解用Dreamweaver制作网页中的表格

dreamweaver|网页|详解 表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.虽然现在都提倡WEB标准建立网站,但是有时在网页中还是会应用到表格的. 这个教程我们给大家讲解表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实

用Dreamweaver制作网页中的表格详解

表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.虽然现在都提倡WEB标准建立网站,但是有时在网页中还是会应用到表格的. 这个教程我们给大家讲解表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实例 这幅页面的排版格式,如果用以前我

CSS设计网页教程:制作网页气泡状文本框

气泡对话框在网页中经常用于说明提示等功能,可以形象生动的现实一些需要用户注意的文字与内容,本文介绍仅用CSS来实现这种简单的网页效果. 气泡状文本框,是一种很生动的网页设计手段. 它可以用来表示用户的发言. 也可以用来作为特定信息的提示符. DVD租借网站Netflix,还用它显示碟片的详细信息. ========================= 制作CSS气泡框的传统方法,需要5张背景图片,分别是: * tl.gif,左上方的圆角. * tr.gif,右上方的圆角. * bl.gif,左下方

网页字体在Frontpage2000制作网页中的讲解

运用Html,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到css.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力.考虑到用frontpage制作网页的人较多,同时它对其他网页编辑器的使用者也有一定的借鉴作用, 因此,我就讲解一下如何在frontpage2000中运用css设置网页字体. 我们可以用css设置出无数种网页字体,但万变不离其宗,任何的变化都要遵循css的基本语法.因此我们先来了解一下css的基本语法

Photoshop精彩实例:制作网页式电子相册!

大家可能都常听到电子相册的说法.其实Photoshop就已经提供了制作网页式电子相册的功能.如果要作为网页使用,只需在Photoshop的菜单选择"文件-存储为Web所用格式",然后在"优化"中设置保存的格式,或者选择"四联",在其中选择一个Photoshop自动为你生成的Web图像文件. 另外,我们还可以将自己电脑中的所有照片制作成Web相册,Photoshop会自动为你生成一个带有链接的网页文件,从而可以让你的亲人.朋友通过网络欣赏你的照片.

jQuery实例教程:jQuery网页图片切换效果

文章简介:假设你有一组作品,你想不用转跳到另外一个页面就可以显示多个图片,你可以将JPG图片载入到目标元素中去.下面是jQuery图片切换效果示例. 假设你有一组作品,你想不用转跳到另外一个页面就可以显示多个图片,你可以将JPG图片载入到目标元素中去.下面是jQuery图片切换效果示例: 该示例的核心jQuery代码: $(document).ready(function() { $("h2").append("<em></em>") $(&