jquery 展开折叠效果

时间：2023-03-09 08:56:23
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>

相关文章