JQuert

最新推荐文章于 2022-10-18 15:19:32 发布

原创最新推荐文章于 2022-10-18 15:19:32 发布 · 494 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#float #function #div #server #jquery #border

课堂笔记专栏收录该内容

43 篇文章

订阅专栏

<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        body{ font-size:18px;}
    #divFrame{ width:360px; height:180px; border:solid 1px #eee;}
    ul{ list-style-type:none; padding:0px;}
    ul li{ float:left; width:100px; height:20px;}
    #divHeader{ width:360px; height:30px; background-color:#eee; float:left; margin:0px; padding:0px;}
    #divHeader h3{ float:left; padding:0px; margin:0px;}
    #divHeader span{ float:right;}
    #divContent{ width:360px; height:150px; padding:3px; margin:2px;}
    #divBot{ float:right; margin-top:30px; padding:3px;}
    </style>

    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //挂起事件
            $('#divHeader span').click(function () {
                if ($('#divContent').is(':visible')) {
                    $('#divHeader span').text('展开');
                    //$('#divContent').hide(2000);
                    $('#divContent').css('display', 'none');
                }
                else {
                    $('#divHeader span').text('挂起');
                    $('#divContent').show(2000);
                }
            })

            //给"简化"加单击事件
            $('#divBot span>a').click(function () {
                if ($('#divBot span>a').text() == '简化') {
                    $('#divBot span>a').text('更多....');
                    $('li:gt(3)').hide(2000);
                } else {
                    $('#divBot span>a').text('简化');
                    $('li:gt(3)').show(2000);
                }
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divFrame">
        <div id="divHeader">
        <h3>图书分类</h3>
            <span>挂起</span></div>
        <div id="divContent">
            <ul>
                <li><a href="#">语文<i>(1100)</i></a></li>
                <li><a href="#">数学<i>(1100)</i></a></li>
                <li><a href="#">英语<i>(1100)</i></a></li>
                <li><a href="#">地理<i>(1100)</i></a></li>
                <li><a href="#">历史<i>(1100)</i></a></li>
                <li><a href="#">政治<i>(1100)</i></a></li>
                <li><a href="#">化学<i>(1100)</i></a></li>
                <li><a href="#">物理<i>(1100)</i></a></li>
                <li><a href="#">社会<i>(1100)</i></a></li>
                <li><a href="#">自然<i>(1100)</i></a></li>
                <li><a href="#">生物<i>(1100)</i></a></li>
                <li><a href="#">音乐<i>(1100)</i></a></li>
            </ul>
            <div id="divBot">
                <span><a href="#">简化</a></span></div>
        </div>
    </div>
    </form>
</body>