<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            font-size: 13px;
        }
        #divFrame {
            border: 1px solid #666666;
            width: 301px;
            overflow: hidden;
        }
        #divFrame .clsHead {
            background-color: #EEEEEE;
            padding: 8px;
            height: 18px;
            cursor: hand;
        }
        #divFrame .clsHead h3 {
            padding: 0;
            margin: 0;
            float: left;
        }
        #divFrame .clsHead span {
            float: right;
            margin-top: 3px;
        }
        #divFrame .clsContent {
            padding: 8px;
        }
        #divFrame .clsContent ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #divFrame .clsContent ul li {
            float: left;
            width: 95px;
            height: 23px;
            line-height: 23px;
        }
        #divFrame .clsBot {
            float: right;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        .getFocus {
            background-color: #EEEEEE;
        }
    </style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(document).ready(function () {
            $(".clsHead").click(function () {
                if($(".clsContent").is(":visible"))
                {
                    $(".clsHead span img").attr("src","images/a1.gif");
                    $(".clsContent").css("display","none");
                }
                else
                {
                    $(".clsHead span img").attr("src","images/a2.gif");
                    $(".clsContent").css("display","block");
                }
            });

            $(".clsBot > a").click(function () {
                if($(".clsBot > a").text() == "简化")
                {
                    $("ul li:gt(4):not(:last)").hide("normal");
                    $(".clsBot > a").text("更多");
                }
                else
                {
                    $("ul li:gt(4):not(:last)").show("normal");
                        //.addClass("getFocus");
                    $(".clsBot > a").text("简化");
                }
            });
        });
    </script>
</head>
<body>
    <div id="divFrame">
        <div class="clsHead">
            <h3>图书分类</h3>
            <span><img src="images/a2.gif"></span>
        </div>
        <div class="clsContent">
            <ul>
                <li><a href="#">小说</a><i>( 0000 )</i></li>
                <li><a href="#">文艺</a><i>( 0000 )</i></li>
                <li><a href="#">青春</a><i>( 0000 )</i></li>
                <li><a href="#">少儿</a><i>( 0000 )</i></li>
                <li><a href="#">生活</a><i>( 0000 )</i></li>
                <li><a href="#">社科</a><i>( 0000 )</i></li>
                <li><a href="#">管理</a><i>( 0000 )</i></li>
                <li><a href="#">计算机</a><i>( 0000 )</i></li>
                <li><a href="#">教育</a><i>( 0000 )</i></li>
                <li><a href="#">工具书</a><i>( 0000 )</i></li>
                <li><a href="#">引进版</a><i>( 0000 )</i></li>
                <li><a href="#">其他类</a><i>( 0000 )</i></li>
            </ul>
            <div class="clsBot">
                <a href="#">简化</a>
                <img src="images/a5.gif" alt="">
            </div>
        </div>
    </div>
</body>
</html>