小菜单

最新推荐文章于 2025-12-26 14:24:35 发布

原创最新推荐文章于 2025-12-26 14:24:35 发布 · 402 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#float #function #xhtml #div #server #jquery

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="logo.aspx.cs" Inherits="JQeury.logo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head 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;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="#">11<i>(1100)</i></a></li>
       <li><a href="#">22<i>(1100)</i></a></li>
       <li><a href="#">33<i>(1100)</i></a></li>
       <li><a href="#">44<i>(1100)</i></a></li>
       <li><a href="#">55<i>(1100)</i></a></li>
       <li><a href="#">66<i>(1100)</i></a></li>
       <li><a href="#">77<i>(1100)</i></a></li>
       <li><a href="#">88<i>(1100)</i></a></li>
       <li><a href="#">99<i>(1100)</i></a></li>
       <li><a href="#">00<i>(1100)</i></a></li>
    </ul>
    <div id="divBot"><span><a href="#">简化</a></span></div>
    </div>
    </div>
    </form>
</body>
</html>