效果:
代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>显示和隐藏DIV</title> <script src="JavaScript/jquery-1.8.3.min.js"></script> <style type="text/css"> .content { 400px; padding: 5px; border: 1px solid #ff6a00; display: none; } </style> <script type="text/javascript"> $(document).ready(function () { $("#submit_id").click(function () { if ($("#submit_id").text() == "展开") { $("#submit_id").text("收起"); $("#content_id").slideDown("fast"); } else if ($("#submit_id").text() == "收起") { $("#submit_id").text("展开"); $("#content_id").slideUp("fast"); } else { alert("Error!"); } }) }) </script> </head> <body> <form id="form1" runat="server"> <div> <span><a id="submit_id" href="Javascript:void(0)">展开</a></span> <div id="content_id" class="content"> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> </div> </div> </form> </body> </html>