您的位置：首页 > Web前端 > JQuery

Jquery实现的文本展开和收缩

2012-03-12 20:50 357 查看

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!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 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>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航