天天看點

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>