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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>在此处插入标题</title>

    <style>

        .div1{position: relative; border:1px solid red; width:200px; line-height: 30px;}

        .span1{border-bottom:1px solid #ccc; display: block;}

        .img1{

            position: absolute;

            top:5px;

            left:180px;

        }

    </style>

    <script language='javascript' src='../js/jquery.js'></script>

    <script>

        $().ready(function() {

           $('.img1').bind('click', function() {

               if($(this).attr("src")=="../img/down.jpg"){

                   $(this).attr("src","../img/up.jpg");

                   $(this).next().toggle();

               }else{

                   $(this).attr("src","../img/down.jpg");

                   $(this).next().toggle();

               }

            });

        });

    </script>

</head>

<body>

<div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/>

    <div class="div2">

        添加商品

        <br>

        管理商品

        <br>

        商品入库

        <br>

        浏览商品

    </div>

</div>

<div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/>

    <div class="div2">

        添加商品

        <br>

        管理商品

        <br>

        商品入库

        <br>

        浏览商品

    </div>

</div>

<div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/>

    <div class="div2">

        添加商品

        <br>

        管理商品

        <br>

        商品入库

        <br>

        浏览商品

    </div>

</div>

<div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/>

    <div class="div2">

        添加商品

        <br>

        管理商品

        <br>

        商品入库

        <br>

        浏览商品

    </div>

</div>

</body>

</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. java中不带package和带package的编译运行方式

    Java中不带package的程序和带package的程序编译的方式是不同的. 一.不带package的程序建立个HelloWorld.java的文件,放入C:\,内容如下:public class ...

  2. centos 7 的几点改动

    1.运行级别 旧:/etc/inittab 新:/etc/ststemd/system  例:ln -sf /lib/systemd/system/multi-user.target /etc/sys ...

  3. 如何在CentOS 7服务器上安装NodeJS

    你可以通过运行以下命令. 1 sudo yum install epel-release 现在可以使用yum命令安装Node.js了. 1 sudo yum install nodejs 因为在开发过 ...

  4. Fortran向C传递NULL值

    在很多C或C++的头文件定义中,NULL被指定定义为0,这里不再具体展开 gfortran的手册关于iso c binding的章节,定义NULL如下 Moreover, the following ...

  5. Android Bitmap 全面解析(四)图片处理效果对比 ...

    对比对象: UIL Volley 官方教程中的方法(此系列教程一里介绍的,ImageLoader的处理方法和官方的差不多) -------------------------------------- ...

  6. 搭建openfire Android 客户端学习和开发【二】spark源码导入eclipse

    首先声明下 这是我在eoe上转载的 写的很好就摘抄了... 第一步 下载源码 svn下载,下载地址:spark:http://svn.igniterealtime.org/svn/repos/spar ...

  7. c++ exports def文件

    https://msdn.microsoft.com/zh-cn/library/hyx1zcd3(v=vs.80).aspx EXPORTS 引入了一个由一个或多个 definitions(导出的函 ...

  8. NOIP 2014 pj & tg

    由于我太弱,去了pj组= = ============================== T1: 傻逼暴力 T2: 傻逼暴力+判断+更新 T3: 手画一下就知道了.算出这个点在第几圈,再使劲yy下在 ...

  9. 为nginx增加nginx_http_concat模块

    为nginx增加nginx_http_concat模块 时间 2013-06-05 22:14:56  我行我思 原文  http://www.fanjun.me/?p=562 主题 Nginx 缘由 ...

  10. HTML模仿桌面

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