效果：

代码：

<%@ 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. Java字节码中的方法调用

    invokestatic,用于static修饰的方法.任何时候调用的时候只需要类名+方法名即可,无需new.JVM直接将其映射到方法区,执行速度极快.当该方法需要参数的时候,invokestatic会 ...

  2. ZOJ 3607 Lazier Salesgirl 贪心

    这个题比上个题简单得多,也是超过W时间会睡着,睡着就再也不会卖了,顾客按时间顺序来的,但是可能有顾客同时到(同时到如果醒着就全卖了),并且每个人只买一块面包,也是求最大的W,使得卖出面包的平均价格最高 ...

  3. 浙江工商大学15年校赛C题 我删我删,删删删 【简单模拟】

    Description: 有一个大整数.不超过1000位.假设有N位.我想删掉其中的任意S个数字.使得删除S位后,剩下位组成的数是最小的. Input: 有多组数据数据,每组数据为两行.第一行是一个大 ...

  4. php MySQLi部分函数(面向对象和过程)

    版本支持:PHP > 5.0  MySQL > 4.0 2. mysqli 连接数据库: $db = new mysqli(host,user,password,database);返回一 ...

  5. Unity3d 网络编程（二）（Unity3d内建网络各项參数介绍）

    这里是全部Unity3d在网络中能用到相关的类及方法.纵观參数功能, Unity3d来写一个手游是不二的选择: RPC 能够传递的參数 int float string NetworkPlayer N ...

  6. Wakelock API详解

    官方资料  http://developer.android.com/intl/zh-CN/reference/android/os/PowerManager.WakeLock.html http:/ ...

  7. Cocos2D-X扫盲之坐标系、锚点

    一.引言 在Cocos2D-X的开发过程中,经常会碰到设置精灵位置的问题.而设置位置的过程,涉及到两个问题:第一是坐标系,包括原点的位置.X/Y坐标轴的方向灯:第二是基准点(Cocos2D-X中叫锚点 ...

  8. vs2016 创建 vsto excel 文件项目的一个问题

    新工作需要些一个基于Excel开发一个工具,vs的 vsto 功能很好用,封装了基于开发office 开的一些工具.但是在实际使用时,创建项目总是报错,提示打开excel文件失败.项目是需要创建一个e ...

  9. ZOJ 3702 Fibonacci

    解题思路: 找规律,不难的,打表 坑的地方在于题目限定条件 and the seed value for G(1) is a random integer t, (t>=1) 虽然都用粗体表示出 ...

  10. Google出品的自动Web安全扫描程序 Skipfish 下载及安装使用方法

    Skipfish是由google出品的一款自动化的网络安全扫描工具,该工具可以安装在linux.freebsd.MacOS X系统和windows(cygwin). 谷歌工程师Michal Zalew ...