使用toggle()方法进行显示隐藏
这是一个示例：
<html>
<head>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle(); //toggle()方法进行显示隐藏交互事件，如果显示的就进行隐藏，如果是隐藏的就显示
});
$(".btn2").toggle(2000,function(){
$(".div2").toggle(); //callback
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
<button class="btn2">Toggle2</button>
<div class="div1">http://www.cnblogs.com/sosoft/</div>
<div class="div2" style="display:none">柔城</div>
</body>
</html>
效果体验：http://hovertree.com/texiao/jquery/8.htm
示例中用到的toggle()方法：
定义和用法
toggle() 方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
语法
$(selector).toggle(speed,callback,switch)
| 参数 | 描述 |
|---|---|
| speed |
可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。 可能的值：
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。 如果设置此参数，则无法使用 switch 参数。 |
| callback |
可选。toggle 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。 |
| switch |
可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。
如果设置此参数，则无法使用 speed 和 callback 参数。 |
提示和注释
注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。
使用toggle()方法进行显示隐藏的更多相关文章
- jQuery使用toggle()方法进行显示隐藏
转自:https://www.cnblogs.com/sosoft/p/3460556.html 这是一个示例: 1 <html> 2 <head> 3 <script ...
- jquery的toggle动画效果显示隐藏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle
<html><head><meta charset="utf-8"><title></title><script ...
- jquery的toggle()函数，显示/隐藏交替
<!DOCTYPE html> <html lang="en"> <head> <script src="jquery.js&q ...
- 使用jQuery的toggle()方法对HTML标签进行显示、隐藏操作
这是一个示例: <html> <head> <script type="text/javascript" src="https://code ...
- js进阶 13-1 jquery动画中的显示隐藏函数有哪些
js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...
- vue实现 toggle显示隐藏效果
背景介绍jQuery中有个toggle()方法,可以切换元素的显示状态,在用vue时如果不引入jQuery如何实现这种效果?使用场景常见有三种场景:1.控制页面中一个dom元素2.控制页面中多个dom ...
- div的显示隐藏方法汇总
JQuery DIV 动态隐藏和显示的方法 1. 如果在载入是隐藏: <head> <script language="javascript"> funct ...
- 基于jquery封装通用的控制显示隐藏的方法
应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...
随机推荐
- MYSQL INNODB PAGE一督
MYSQL INNODB PAGE一督
- 初识Opserver，StackExchange的监控解决方案
Opserver是闻名遐迩的网站Stack Overflow的开源监控解决方案,由Stack Exchange发布.它基于.NET框架构建,这在监控工具领域有些与众不同. 旨在为每个受监控系统的健康状 ...
- ENode框架Conference案例分析系列之 - 事件溯源如何处理重构问题
前言 本文可能对大多数不太了解ENode的朋友来说,理解起来比较费劲,这篇文章主要讲思路,而不是一上来就讲结果.我写文章,总是希望能把自己的思考过程尽量能表达出来,能让大家知道每一个设计背后的思考的东 ...
- 剑指Offer面试题：31.两个链表的第一个公共节点
一.题目:两个链表的第一个公共节点 题目:输入两个链表,找出它们的第一个公共结点. 链表结点定义如下,这里使用C#语言描述: public class Node { public int key; p ...
- Azure PowerShell (12) 通过Azure PowerShell创建SSH登录的Linux VM
<Windows Azure Platform 系列文章目录> 本章将介绍如何使用Azure PowerShell,创建SSH登录的Linux VM 前提要求: 1.安装Azure Pow ...
- Ubuntu系统字体安装
用惯了Windows,刚转到Ubuntu时总感觉字体显示没那么亲切,尤其是中文字体,在网页上显示特别怪.有些软件对中文字体的支持也不好,WebStorm中的Git logs中文也显示乱码.把系统语言设 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (22) -----第五章 加载实体和导航属性之延迟加载
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第五章 加载实体和导航属性 实体框架提供了非常棒的建模环境,它允许开发人员可视化地使 ...
- Everything search syntax
Operators: space AND | OR ! NOT < > Grouping " " Search for an exact phrase. Wildcar ...
- Spring学习记录(六)---使用外部属性文件
在bean配置资源或系统部署,如数据库的连接时,需要这样: 要包含相关jar包:c3p0.jar 和mysql.connector.jar xml配置: <bean id="dataS ...
- OGNL相关代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...