<%@ 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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
