仅供参考  图片 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. Writing the first draft of your science paper — some dos and don’ts

    Writing the first draft of your science paper — some dos and don’ts 如何起草一篇科学论文?经验丰富的Angel Borja教授告诉你 ...

  2. Java-优秀博客推荐

    一. TCP/IP Socket 兰亭风雨的专栏: http://blog.csdn.net/ns_code 二. NIO 并发编程网-Java NIO系列教程:http://ifeve.com/ch ...

  3. [Asp.Net]状态管理（Session、Application、Cache）

    上篇博文介绍了在客户端状态管理的两种方式:http://www.cnblogs.com/wolf-sun/p/3329773.html.除了在客户端上保存状态外,还可以在服务器上保存状态.使用客户端的 ...

  4. 【转】不得不看的两次从C++回归C的高手评论C++

    不得不看的两次从C++回归C的高手评论C++ Linux之父炮轰C++:糟糕程序员的垃圾语言 Linux之父话糙理不糙 不得不看的两次从C++回归C的高手评论C++ C语言是否该扔进垃圾桶 为什么每个 ...

  5. asp.net过滤数据中有异常数据字符串

    /// <summary> /// 过滤数据 /// </summary> /// <param name="_str"></param& ...

  6. 基于jquery的相册预览gallery

    众多有图片的产品,都要加个图片预览功能.然后市面上就出现了各种各样的相册,下面也提供一个基于jquery的相册. 源码:https://github.com/lilyH/gallery 版本: v0. ...

  7. 基础知识系列☞GET和POST→及相关知识

    参考资料: [1].<IT企业必读的200个.Net面试题> [2].http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.htm ...

  8. 马化腾:办公用QQ休闲用微信[Dream Catchers论坛]

    近日,香港大学举办以创新创业为主题的Dream Catchers论坛.其中腾讯董事局主席马化腾在下午两点四十五分在李兆基会议中心做了专题演讲,分享了自己的创业经历并回答了媒体人张力奋有关产品.整整对手 ...

  9. Integer Inquiry

    Integer Inquiry Time Limit:1000MS     Memory Limit:10000KB     64bit IO Format:%I64d & %I64u Sub ...

  10. [Effective JavaScript 笔记]第15条：当心局部块函数声明笨拙的作用域

    嵌套函数声明.没有标准的方法在局部块里声明函数,但可以在另一个函数的顶部嵌套函数声明. function f(){return "global"} function test(x) ...