jquery制作简单手风琴功能，代码量少

jquery制作简单手风琴功能，代码量少

效果图：

 

首先

1.各自引入jquery

2.我里面的大小数值大家可以自由更改；

3.背景图片，大家向对应自己 的图片

各位，现在开始了

CSS：

<style type="text/css">
        .menu_list {
            width: 100%;
        }
        
        .menu_head {
            cursor: pointer;
            position: relative;
            margin: 1px;
            font-weight: bold;
            background: #eef4d3 url(left.png) center right no-repeat;
        }
        
        .menu_body {
            display: none;
        }
        
        .menu_body a {
            display: block;
            color: #006699;
            background-color: #EFEFEF;
            padding-left: 5px;
            font-weight: bold;
            text-decoration: none;
        }
        
        .menu_body a:hover {
            color: #000000;
            text-decoration: underline;
        }
    </style>

 

html：

<div id="firstpane" class="menu_list">

            <p class="menu_head">Header-1</p>
            <div class="menu_body">
                <a href="#">Link-1</a>
            </div>

            <p class="menu_head">Header-2</p>
            <div class="menu_body">
                <a href="#">Link-1</a>
            </div>

            <p class="menu_head">Header-3</p>
            <div class="menu_body">
                <a href="#">Link-1</a>
            </div>

        </div>

 

 

JS：

<script type="text/javascript">
            $("#firstpane p.menu_head").click(function() {
                $(this).css({ backgroundImage: "url(down.png)" }).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
                $(this).siblings().css({ backgroundImage: "url(left.png)" });
            });
</script>

 

 

大家点个赞呗~~~欢迎留言