效果：

代码：

<%@ 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 {

            width: 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>

　　

JQuery - 垂直显示隐藏DIV的更多相关文章

  1. 锋利的Jquery(点击显示隐藏div)

    点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  2. js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么

    js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...

  3. 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  4. js和jquery实现显示隐藏

    (选择的重要性) 当点击同一个按钮的时候实现显示影藏 <a id="link" class="b-btn-four task-resolve add-sub-tas ...

  5. js jQuery显示隐藏div的几种方法

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_36135335/article/d ...

  6. [jquery]显示隐藏div标签的几种方法

    1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...

  7. jQuery显示隐藏div的几种方法

    1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...

  8. JS 显示隐藏DIV

    JS关闭DIV HTML <div id="bar1"> <p onclick="removeElement('bar1')">关闭&l ...

  9. 点击自动显示/隐藏DIV代码。(简单实用）

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 很多时候我们需要将DIV的信息默认为隐藏状态,只有当用户点击时才显示DIV中包含的提示文字.这类效果在互联网上应用得很多,但实现的方 ...

随机推荐

  1. c++，static 静态成员变量 / 静态成员函数

    静态成员变量: //静态成员变量(static) // //1.如果想在同类的多个对象之间实现数据共享 ,可以用静态 //成员变量,即用static修饰的成员变量,例 static int a; // ...

  2. BZOJ 1597: [Usaco2008 Mar]土地购买( dp + 斜率优化 )

    既然每块都要买, 那么一块土地被另一块包含就可以不考虑. 先按长排序, 去掉不考虑的土地, 剩下的土地长x递增, 宽y递减 dp(v) = min{ dp(p)+xv*yp+1 } 假设dp(v)由i ...

  3. Android的WiFi开启与关闭

    注意:要首先注册开启和关闭WiFi的权限, <?xml version="1.0" encoding="utf-8"?> <manifest ...

  4. POJ 1458 最长公共子序列 LCS

    经典的最长公共子序列问题. 状态转移方程为 : if(x[i] == Y[j]) dp[i, j] = dp[i - 1, j - 1] +1 else dp[i, j] = max(dp[i - 1 ...

  5. mvc导航配置

    <?xml version="1.0" encoding="utf-8" ?><Configuration> <Navigatio ...

  6. BZOJ 1025: [SCOI2009]游戏( 背包dp )

    显然题目要求长度为n的置换中各个循环长度的lcm有多少种情况. 判断一个数m是否是满足题意的lcm. m = ∏ piai, 当∑piai ≤ n时是满足题意的. 最简单我们令循环长度分别为piai, ...

  7. 安装MyEclipse Color Themes

    下载地址:http://eclipsecolorthemes.org/?list=toppicks&lang=html 安装步骤如下: 1.Import---Preferences 2.选择下 ...

  8. Qt学习之路(54): 自定义拖放数据对象

    前面的例子都是使用的系统提供的拖放对象 QMimeData 进行拖放数据的存储,比如使用 QMimeData::setText() 创建文本,使用 QMimeData::urls() 创建 URL 对 ...

  9. CCIE路由实验(8) -- QoS

    1.查看端口缺省的队列机制2.配置CB-WFQ3.配置CB-LLQ4.配置CB-Shapping在以太接口下5.配置CB-Shapping在FR接口下6.配置帧中继流量整形FRTS7.配置CB-Pol ...

  10. 双卡双待支持双电池 夏新N808深度评测_夏新手机评测-泡泡网

    双卡双待支持双电池 夏新N808深度评测_夏新手机评测-泡泡网 双卡双待支持双电池 夏新N808深度评测