手风琴菜单—基于jquery

<div>
        <h3>瓜类</h3>
        <ul>
            <li>西瓜</li>
            <li>西瓜</li>
            <li>西瓜</li>
            <li>西瓜</li>
        </ul>
        <h3>瓜类</h3>
        <ul>
            <li>西瓜</li>
            <li>西瓜</li>
            <li>西瓜</li>
            <li>西瓜</li>
        </ul>
        <h3>瓜类</h3>
        <ul>
            <li>西瓜</li>
            <li>西瓜</li>
            <li>西瓜</li>
            <li>西瓜</li>
        </ul>
        <h3>瓜类</h3>
        <ul>
            <li>西瓜</li>
            <li>西瓜</li>
            <li>西瓜</li>
            <li>西瓜</li>
        </ul>
    </div>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 250px;
            height: auto;
            margin: 50px auto;
        }
        div h3{
            line-height: 30px;
            font-weight: 500;
            color: #fff;
            background-color: #222;
            padding: 10px 20px;
            box-sizing: border-box;
            border-bottom: 1px solid #eee;
        }
        div h3:hover{
            background-color: #666;
        }
        ul{
            display: none;
        }
        ul li{
            list-style: none;
            line-height: 25px;
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-top: none;
            box-sizing: border-box;
            padding: 10px 20px;
        }
        ul li:hover{
            background-color: #ccc;
        }
        .open{
            background-color: #666;
        }
    </style>

<script src="./js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("h3").click(function(){
                $(this).toggleClass(".open")
                .siblings("h3")
                .removeClass(".open")
                .end()
                .next("ul")
                .slideToggle()
                .siblings("ul")
                .slideUp();
            });
        })
    </script>