登录模块加载中...
会员投稿 投稿指南 今天是:
打印本页 | 关闭窗口 | 双击滚屏 您的位置首页>>网页制作学习园地>>建站指南>>建站技巧文集>>制作网页中可折叠的面板
制作网页中可折叠的面板
来源: ‖ 作者: ‖ 点击: ‖ 时间:12-03-06 10:31:10 ‖ 【 】‖ 我要投稿

实现该示例的核心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行:将

中的所有元素隐藏,第一个除外

第2行:将第五个后面的所有

  • 元素隐藏

    第3部分:当用户点击

    时,对下一个

  • 元素后面的所有元素下来显示出来。

    第6部分:当点击,隐藏被元素,然后显示,并将第5个

  • 后面的所有
  • 元素折叠隐藏起来。

  • 加入收藏:  加入收藏夹  | 发送给好友:  发送给好友
    责任编辑:admin
  • 上一篇:制作网页灰度图片悬浮效果
  • 下一篇:无
  • 相关文章列表
    请文明参与讨论,禁止漫骂攻击。  
    网友评论