jQuery toggle 使用

2024-06-19 23:48

本文主要是介绍jQuery toggle 使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

jQuery 中 toggle 作用

切换元素的显示与隐藏状态

如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

<body>
<div class="header"><div class="logo"><a href="###"><img src="images/logo.png" /></a></div><div class="search"><form><input type="text" class="sBox" value="请输入关键字" onfocus="if(value=='请输入关键字') {value=''}" onblur="if (value=='') {value='请输入关键字'}"/><input type="submit" class="sBtn" value="" /></form></div>
</div>
<div class="nav"><div class="c-nav"><ul><li><a href="###" class="current">首页</a></li><li class="h-m"><a href="###">爱生活<i></i></a><ul class="menu l-life"><li><a href="###">养生<em></em></a></li><li><a href="###">杂谈<em></em></a></li><li><a href="###">穿着<em></em></a></li><li><a href="###">健身</a></li></ul></li><li class="h-m"><a href="###">资讯<i></i></a><ul class="menu r-news"><li><a href="###">八卦<em></em></a></li><li><a href="###">趣事<em></em></a></li><li><a href="###">奇闻<em></em></a></li><li><a href="###">发现</a></li></ul></li><li class="h-m"><a href="###">谈情<i></i></a><ul class="menu t-feelings"><li><a href="###">约会<em></em></a></li><li><a href="###">性情</a></li></ul></li><li class="h-m"><a href="###">找娱乐<i></i></a><ul class="menu l-ent"><li><a href="###">娱乐<em></em></a></li><li><a href="###">资讯<em></em></a></li><li><a href="###">历史</a></li></ul></li><li><a href="###">资料</a></li><li><a href="###">美图</a></li><li><a href="###">专题</a></li></ul><div class="weixin"><a href="###"><i></i>关注微信</a><div class="QRcode"><img src="images/QRcode.png" /></div></div></div>
</div><div class="subNav"><div class="hot"><b>热点推荐:</b><a href="###">秘法</a><a href="###">图片</a><a href="###">图片</a><a href="###">视频</a></div>
</div>
<!--导航条js--> 
<script>
$(document).ready(function(e) {$('.nav .c-nav ul li').hover(function(){if($(this).hasClass('h-m')){$('.subNav .hot').toggle()}})
});
</script> 
</body>

默认显示

1197658-20170724161151715-1905466332.png

鼠标悬浮

1197658-20170724161213153-878018116.png

 

参数描述
speed

可选。规定元素从可见到隐藏的速度(或者相反)。默认为 "0"。

可能的值:

  • 毫秒 (比如 1500)
  • "slow"
  • "normal"
  • "fast"

在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。

如果设置此参数,则无法使用 switch 参数。

callback

可选。toggle 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

switch

可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。

  • True - 显示所有元素
  • False - 隐藏所有元素

如果设置此参数,则无法使用 speed 和 callback 参数。

提示和注释

注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。

 

这篇关于jQuery toggle 使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1076498

相关文章

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

CSS引入方式和选择符的讲解和运用小结

《CSS引入方式和选择符的讲解和运用小结》CSS即层叠样式表,是一种用于描述网页文档(如HTML或XML)外观和格式的样式表语言,它主要用于将网页内容的呈现(外观)和结构(内容)分离,从而实现... 目录一、前言二、css 是什么三、CSS 引入方式1、行内样式2、内部样式表3、链入外部样式表四、CSS 选

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面:本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.

Python文件操作与IO流的使用方式

《Python文件操作与IO流的使用方式》:本文主要介绍Python文件操作与IO流的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、python文件操作基础1. 打开文件2. 关闭文件二、文件读写操作1.www.chinasem.cn 读取文件2. 写

PyQt6中QMainWindow组件的使用详解

《PyQt6中QMainWindow组件的使用详解》QMainWindow是PyQt6中用于构建桌面应用程序的基础组件,本文主要介绍了PyQt6中QMainWindow组件的使用,具有一定的参考价值,... 目录1. QMainWindow 组php件概述2. 使用 QMainWindow3. QMainW

使用Python自动化生成PPT并结合LLM生成内容的代码解析

《使用Python自动化生成PPT并结合LLM生成内容的代码解析》PowerPoint是常用的文档工具,但手动设计和排版耗时耗力,本文将展示如何通过Python自动化提取PPT样式并生成新PPT,同时... 目录核心代码解析1. 提取 PPT 样式到 jsON关键步骤:代码片段:2. 应用 JSON 样式到

java变量内存中存储的使用方式

《java变量内存中存储的使用方式》:本文主要介绍java变量内存中存储的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、介绍2、变量的定义3、 变量的类型4、 变量的作用域5、 内存中的存储方式总结1、介绍在 Java 中,变量是用于存储程序中数据

关于Mybatis和JDBC的使用及区别

《关于Mybatis和JDBC的使用及区别》:本文主要介绍关于Mybatis和JDBC的使用及区别,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、JDBC1.1、流程1.2、优缺点2、MyBATis2.1、执行流程2.2、使用2.3、实现方式1、XML配置文件

macOS Sequoia 15.5 发布: 改进邮件和屏幕使用时间功能

《macOSSequoia15.5发布:改进邮件和屏幕使用时间功能》经过常规Beta测试后,新的macOSSequoia15.5现已公开发布,但重要的新功能将被保留到WWDC和... MACOS Sequoia 15.5 正式发布!本次更新为 Mac 用户带来了一系列功能强化、错误修复和安全性提升,进一步增