效果：

代码：

<%@ 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. Android:Service的注意点以及一些知识点

    1.自己练习service的start()方法开启一个service服务的时候,不管怎么开启按钮,就是开启不了service服务,控制台也没有报错信息, app不闪退,代码就那么几行.找了好久找不出来 ...

  2. Hibernate入门之配置文件

    <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE hibernate-configuration PUBLIC "-//Hi ...

  3. 将树莓派变成一个web服务器(2)：Nginx+Flask+uWSGI部署全过程

    1)安装Flask,uwsgi,nginx sudo apt-get update sudo apt-get install python-flask #Flask sudo apt-get inst ...

  4. java.lang.IllegalStateException: No data type for node: org.hibernate.hql.ast.tree.MethodNode(尼玛，蛋疼的错误)

    java.lang.IllegalStateException: No data type for node: org.hibernate.hql.ast.tree.MethodNode   \-[M ...

  5. 如何去掉IE控件的垂直滚动条（使用QAxWidget加载IE控件）

    如果使用MFC的CHtmlView或Qt的QAxWidget加载IE控件,载入html文件后都会自动带一个垂直滚动条,我们不想要这个滚动条,改怎么办呢?搜索了一下“隐藏IE控件滚动条”,发现在 htt ...

  6. 基于visual Studio2013解决算法导论之026二叉树

     题目 二叉树实现 解决代码及点评 #include<stdio.h> #include <malloc.h> #include <stdlib.h> typ ...

  7. [置顶] Android开发之XML文件的解析

    Android系统开发之XML文件的解析 我们知道Http在网络传输中的数据组织方式有三种分别为:XML方式.HTML方式.JSON方式.其中XML为可扩展标记语言,如下: <?xml vers ...

  8. 由于物化视图定义为on commit导致update更新基表慢的解决方案

    由于物化视图定义为on commit导致update更新基表慢的解决方案 以下是模拟和解决测试过程: (模拟update慢的过程) 1.首先基于基表创建物化视图日志: create materiali ...

  9. 架构漫谈：自己开发一个Log框架

    前言 在日常开发中我们常常都会用到写日志的功能,现在网上的写Log的框架有很多,但是对于我个人而言,过于庞大:我们往往只为了使用框架中的某一个功能就不得不引用整个框架. 所以,我们今天就来自己动手开发 ...

  10. CSS鼠标样式

    1.缺省方式(箭头形状): cursor:default; 2.手型 cursor: pointer;   //通用的cursor: hand;     //为了兼容ie老版本,可以同时写上