jquery 展开折叠效果

仅供参考  图片 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 展开折叠效果)