仅供参考  图片 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. IE浏览器模式设置

    文件兼容性用于定义让IE如何编译你的网页.此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式. 前言 为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE ...

  2. avalon框架,简单的MVVM

    今天我又要挑战一次一个高大上的公司了 但是看着jd有点忧伤了要求如下 基本要求:1.熟悉 HTML / CSS / JS 并有良好的代码风格:2.理解 Web 标准,语义化,可以解决主流浏览器及不同版 ...

  3. POJ 1836 Alignment

    Alignment Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 11450 Accepted: 3647 Descriptio ...

  4. IIS计数器

    Bytes Total/sec 是 Bytes Sent/sec 与 Bytes Received/sec 的总和.这是 Web 服务每秒传输的总字节数. Cache Total Turnover R ...

  5. 分页控件-ASP.NET（AspNetPager）

    AspNetPager是asp.net中常用的分页控件,下载AspNetPager.dll,添加引用,在工具栏就可以看到AspNetPager控件: <div class="oa-el ...

  6. Win10如何隐藏Windows Defender任务栏图标

    导读 Windows 10 至发布以来就内置集成了 Windows Defender 安全防护应用,但有许多用户平常压根儿就没注意到它的存在.微软为了使安全防护功能更加明显,Windows 10 周年 ...

  7. why we use Symbols in Hash

    Rather than using Strings as the keys in a Hash, it’s better practice to use Symbols. Symbols are ju ...

  8. 初中数学题归纳w

    刷完了一张代数 P1 计算 $\left( \frac{1}{1}-\frac{1}{2}+\frac{1}{3}-\frac{1}{4}+...+\frac{1}{2011}- \frac{1}{2 ...

  9. django template中load的作用

    某些应用提供自定义标签和过滤器库. 要在一个模板中访问它们, 使用 {% load %} 标签: {% load comments %} {% comment_form for blogs.entri ...

  10. 对Excel文件的操作

    ①.将文件设为“嵌入的资源”,Template修改不灵活:Stream stream=this.GetType().Assembly.GetManifestResourceStream(Templat ...