仅供参考  图片 jquery.js 自己处理

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <title>在此处插入标题</title>
  6.     <style>
  7.         .div1{position: relative; border:1px solid red; width:200px; line-height: 30px;}
  8.         .span1{border-bottom:1px solid #ccc; display: block;}
  9.         .img1{
  10.             position: absolute;
  11.             top:5px;
  12.             left:180px;
  13.         }
  14.     </style>
  15.     <script language='javascript' src='../js/jquery.js'></script>
  16.     <script>
  17.         $().ready(function() {
  18.            $('.img1').bind('click', function() {
  19.                if($(this).attr("src")=="../img/down.jpg"){
  20.                    $(this).attr("src","../img/up.jpg");
  21.                    $(this).next().toggle();
  22.                }else{
  23.                    $(this).attr("src","../img/down.jpg");
  24.                    $(this).next().toggle();
  25.                }
  26.             });
  27.         });
  28.     </script>
  29. </head>
  30. <body>
  31. <div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/>
  32.     <div class="div2">
  33.         添加商品
  34.         <br>
  35.         管理商品
  36.         <br>
  37.         商品入库
  38.         <br>
  39.         浏览商品
  40.     </div>
  41. </div>
  42. <div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/>
  43.     <div class="div2">
  44.         添加商品
  45.         <br>
  46.         管理商品
  47.         <br>
  48.         商品入库
  49.         <br>
  50.         浏览商品
  51.     </div>
  52. </div>
  53. <div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/>
  54.     <div class="div2">
  55.         添加商品
  56.         <br>
  57.         管理商品
  58.         <br>
  59.         商品入库
  60.         <br>
  61.         浏览商品
  62.     </div>
  63. </div>
  64. <div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/>
  65.     <div class="div2">
  66.         添加商品
  67.         <br>
  68.         管理商品
  69.         <br>
  70.         商品入库
  71.         <br>
  72.         浏览商品
  73.     </div>
  74. </div>
  75. </body>
  76. </html>

jquery 展开折叠效果的更多相关文章

  1. Vue 实现展开折叠效果

    Vue 实现展开折叠效果 效果参见:https://segmentfault.com/q/1010000011359250/a-1020000011360185 上述链接中,大佬给除了解决方法,再次进 ...

  2. jquery 展开折叠菜单

    jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  3. 展开折叠效果 height未知 transition无效

    展开折叠效果,没有设置height时 transition 不起作用 可以设置max-height .default { max-height: 500px; transition: all 1000 ...

  4. jquery 展开关闭效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 简易模仿手机拨号盘浮在ListView之上并且展开,折叠效果

    2013-12-24 16:56:45 有时候可以看到很多手机会将Call log list和Dailer放在同一个页面中,同时Dialer是可以折叠.打开的,自己做了一个Demo,能实现这种效果,简 ...

  6. JS点击查看更多内容 控制段落文字展开折叠

    JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能 ...

  7. jQuery文本段落展开和折叠效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  8. jQuery 文本段落展开和折叠效果

    jQuery 文本段落展开和折叠效果 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" c ...

  9. jquery垂直展开折叠手风琴二级菜单

    摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...

随机推荐

  1. 用 xampp 在 windows/Linux 下搭建代理服务器

    背景:学校上网开始收费,但实验室免费,由于宿舍和实验室都有ipv6,所以在实验室搭建代理服务器,让宿舍通过之上网. Windows下 两步: 1.编辑httpd.comf,去掉关于proxy的注释 L ...

  2. 离线渲染中的不规则光源(Meshlight)

    之前一直在考虑这样一个问题,在实际生活中的光源都是有体积的,但是图形学中,很多时候我们用简单的点光源,面光源,或者方向光来模拟实际生活中这些光源,势必会产生一些误差,同时导致很多效果不好做.那么在离线 ...

  3. linux init.d脚本编写模板

    #!/bin/bash ### BEGIN INIT INFO # # Provides: location_server # Required-Start: $local_fs $remote_fs ...

  4. TFS2008 安装图解(详细版本)（转载）

    由于公司准备上TFS,最近开始学习搭建TFS环境,并为同事讲解TFS的使用,在虚拟 机中搭建测试环境,遇到了很多问题,总结成一篇博客,跟大家交流一下: 我是从微软公司官方网站下载的TFS 2008 1 ...

  5. ThinkPHP邮件发送函数示例

    ThinkPHP邮件发送函数示例详解 /** * 发送邮件 * @param $tomail * @param $subject * @param $body * @param string $con ...

  6. cocos基础教程(4)基础概念介绍

    在Cocos2d-x-3.x引擎中,采用节点树形结构来管理游戏对象,一个游戏可以划分为不同的场景,一个场景又可以分为不同的层,一个层又可以拥有任意个可见的游戏节点(即对象,游戏中基本上所有的类都派生于 ...

  7. [Effective JavaScript 笔记]第16条：避免使用eval创建局部变量

    js中的eval函数是一个强大.灵活的工具.强大的工具容易被滥用,所以了解是值得的.(本人只用过它来处理json数据).错误使用eval函数的方式一:允许它干扰作用域.调用eval函数会将其参数作为j ...

  8. Linux文件与目录常用命令

    目录常用命令: cd:切换目录 pwd:显示当前目录 mkdir:新建一个目录 rmdir:删除一个空的目录 ## cd 命令几种常用方法: cd ~username 切换到用户username的主文 ...

  9. 数据库多张表导出到excel

    数据库多张表导出到excel public static void export() throws Exception{ //声明需要导出的数据库 String dbName = "hdcl ...

  10. vs2010 调试快捷键

    vs2010 调试快捷键   命令名 快捷键 说明 调试.应用代码更改 Alt + F10 启动生成操作,利用它可以通过“编辑并继续”功能应用对正在调试的代码所作的更改. 调试.自动窗口 Ctrl + ...