效果：

代码：

<%@ 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. vsftpd安装

    原文连接:史上最详细的vsftpd配置文件讲解: http://www.9170.org/post-322.html 参考博文:centos启用ftp功能:http://os.51cto.com/ar ...

  2. Android GridView增加HeaderView和FooterView的实现

    Android GridView增加HeaderView和FooterView的实现 做的项目中遇到一个问题,需要实现一个页面 页面的上面是一个自定义的View和GridView,当向下滚动屏幕的时候 ...

  3. springmvc中使用response的out.print问题

    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws E ...

  4. Python函数式编程：内置filter函数使用说明

    filter操作是函数式编程中对集合的重要操作之一,其作用是从原集合中筛选符合条件的条目,组成一个新的集合. 这在我们日常编程中是非常常见的操作.我们通常的做法是通过循环语句来处理. 而使用filte ...

  5. Dreamweaver显示花括号匹配

    按Ctrl+' 可以显示对应括号内的代码.dreamweaver没办法高亮显示花括号.而且没有块选择功能.个人认为Dreamweaver的编辑功能很糟糕.

  6. Event | Beijing Makerspace

    Event | Beijing Makerspace CONTACT INFORMATION 4th Floor, Zhongguancun Dream Lab, Beijing, China Pho ...

  7. Qt删除指定文件

    Qt删除指定文件: QFile fileTemp(filename); fileTemp.remove();

  8. 分析一个socket通信： server/client

    分析一个socket通信: server/client1 server 1. 创建一个server_socket文件,并绑定端口,然后监听端口 (socket, bind, listen) 2. 查询 ...

  9. 使用ant的jar任务打jar包

    <?xml version="1.0" encoding="UTF-8"?> <project name="javaTest&quo ...

  10. servlet 将输入内容通过拼接页面的方式显示出来

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...