效果：

代码：

<%@ 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. ubuntu15.04安装hexo

    首先吐槽一下npm淘宝源,貌似中国目前唯一一个npm源,现在不好用了,不知道是不是换了地址,在吐槽一下万恶的墙!你懂得. 好了,说点正儿八经的事儿. 之所以安装hexo也是为了创建自己的博客,我只说最 ...

  2. BZOJ 3407: [Usaco2009 Oct]Bessie's Weight Problem 贝茜的体重问题( dp )

    01背包... ----------------------------------------------------------------------- #include<cstdio&g ...

  3. HDOJ 3635 并查集- 路径压缩，带秩合并

    思路来源:http://blog.csdn.net/niushuai666/article/details/6990421 题目大意: 初始时,有n个龙珠,编号从1到n,分别对应的放在编号从1到n的城 ...

  4. （Problem 9）Special Pythagorean triplet

    A Pythagorean triplet is a set of three natural numbers, a  b  c, for which, a2 + b2 = c2 For exampl ...

  5. 腾讯QQ：异地登陆也被封号，你们是怎么决策的？？？

    此文我想放到首页,让很多其它的人看到,更期待有人能解释一下.希望管理员给开绿灯. 今天真是费解,我的手机号是青岛的.可是我在武汉工作,因为是3G的卡,全国没有漫游,打电话也没多少钱,所以就没换号. 谁 ...

  6. mysql基础入门

    基本命令:(sql分号结束,切记.切记) 登录mysql:mysql -h ip  -u用户名 -p   或者  mysql  -u用户名  -p密码 查看数据库: show  databases: ...

  7. XML 的实体引用

    实体引用 在 XML 中,一些字符拥有特殊的意义. 如果你把字符 "<" 放在 XML 元素中,会发生错误,这是因为解析器会把它当作新元素的开始. 这样会产生 XML 错误: ...

  8. 使用jQuery的attr方法来修改onclick值

    这篇文章主要介绍了通过jQuery的attr修改onclick值的解决方法 ,需要的朋友可以参考下 var js = "alert('B:' + this.id); return false ...

  9. MUI 列表页面绑定接口数据

    1.我们先看效果 2.功能分析 主要分为3步 数据初始化 下拉刷新 上拉加载 接口数据示例: { "List": [ { "Id": 9, "Orde ...

  10. Docker学习笔记(4) — 开启Docker远程访问

    默认情况下,Docker守护进程会生成一个socket(/var/run/docker.sock)文件来进程本地进程通信,而不会监听任何端口,因此只能在本地使用docker客户端或者使用Docker ...