Jquery导航条在项目中的应用

来源：互联网发布：餐饮软件编辑：程序博客网时间：2024/05/18 01:42

<head>
    <title>导航条在项目中的应用</title>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            font-size: 13px;
        }
        #divFrame
        {
            border: solid 1px #666;
            width: 301px;
            overflow: hidden;
        }
        #divFrame .clsHead
        {
            background-color: #eee;
            padding: 8px;
            height: 18px;
            cursor: hand;
        }
        #divFrame .clsHead h3
        {
            padding: 0px;
            margin: 0px;
            float: left;
        }
        #divFrame .clsHead span
        {
            float: right;
            margin-top: 3px;
        }
        #divFrame .clsContent
        {
            padding: 8px;
        }
        #divFrame .clsContent ul
        {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        #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: #eee;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('.clsHead').click(function () {
                if ($('.clsContent').is(':visible')) {
                    $('.clsHead span a').html('伸开');
                    $('.clsContent').hide(5000);
                }
                else {
                    $('.clsHead span a').html('挂起');
                    $('.clsContent').show(5000);
                }
            })
            $('.clsBot>a').click(function () {
                if ($('.clsBot>a').text() == '简化') {
                    $('ul li:gt(4):not(:last)').hide(2000);
                    $('.clsBot>a').text('更多');
                }
                else {
                    $('ul li:gt(4):not(:last)').show(2000).addClass('GetFocus');
                    $('.clsBot>a').text('简化');
                }
            })
        })
    </script>
</head>
<body>
    <div id="divFrame">
        <div class="clsHead">
            <h3>
                图书分类</h3>
            <span>
                <a href="#">挂起</a></span>
        </div>
        <div class="clsContent">
            <ul>
                <li><a href="#">小说</a><i>(001)</i></li>
                <li><a href="#">文学</a><i>(002)</i></li>
                <li><a href="#">漫画</a><i>(003)</i></li>
                <li><a href="#">数学</a><i>(101)</i></li>
                <li><a href="#">语文</a><i>(102)</i></li>
                <li><a href="#">英语</a><i>(103)</i></li>
                <li><a href="#">政治</a><i>(104)</i></li>
                <li><a href="#">历史</a><i>(105)</i></li>
                <li><a href="#">化学</a><i>(106)</i></li>
                <li><a href="#">生物</a><i>(107)</i></li>
            </ul>
            <div class="clsBot">
                <a href="#">简化</a>
            </div>
        </div>
    </div>
</body>