仅供参考  图片 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. 设定所有tableView中cell的分隔线颜色

    上面只有针对xib或者storyboard中生成的tableview有效,如果想手码也有效,需在initwithframe中添加同样的方法

  2. mysql is marked as crashed and should be repaired错误

    1.mysql数据存放路径默认为/var/lib/mysql/目录 2.用myisamchk命令修复数据表,如: myisamchk -c -r talbe.MYI

  3. DataTable中如何去除重复的项

    DataView dv =dataTable.DefaultView; DataTable dt = dv.ToTable(true, "Name");

  4. How can I style a JavaFX SplitMenuButton in CSS

    0 down vote favorite I try to style a SplitMenuButton in JavaFX. I've got a menuButton and a SplitMe ...

  5. Android Studio-设置switch/case代码块自动补齐

    相信很多和我一样的小伙伴刚从Eclipse转到Android Studio的时候,一定被快捷键给搞得头晕了,像Eclipse中代码补齐的快捷键是Alt+/ ,但是在AS中却要自己设置,这还不是问题的关 ...

  6. 如何查看mysql索引

    show index from tableName; show keys from tableName; · Table表的名称.· Non_unique如果MySQL索引不能包括重复词,则为0.如果 ...

  7. Windows环境下 Node和NPM个性安装

    常拿自己的电脑常用来测试各种Bug,所以始终奋斗在XP.IE6的环境下.让我们在如此级别的环境下,开始Node之路吧~~ 在过去,Node.js一直不支持在Windows平台下原生编译,需要借助Cyg ...

  8. Matlab之findobj()

    findobj findobj:特殊属性的图形对象 语法: 1.findobj: findobj返回根对象的句柄和所有子对象(findobj returns handles of the root o ...

  9. cocos基础教程(5)数据结构介绍之cocos2d::Vector

    cocos2d::Vector cocos2d::Vector<T>是一个封装好的能动态增长顺序访问的容器.cocos2d::Vector<T>中的元素是按序存取的,它的低层实 ...

  10. 91SDK接入及游戏发布、更新指南

    原地址:http://bbs.18183.com/thread-99382-1-1.html本帖最后由 啊,将进酒 于 2014-4-17 10:23 编辑 1.联系91的商务人员建讨论组或者厂商建Q ...