hover、toggle合并事件

1、hover(enter,leave)实现鼠标滑入、滑出效果

2、toggle(fn1,fn2,fnN)模拟鼠标连续点击事件,第一次单击触发事件fn1,第二次触发fn2,以此类推...

3、toggle()切换元素的可见状态,如果元素是可见的,单击切换后则隐藏;如果元素是隐藏的,单击切换后则可见

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绑定事件练习</title>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	// 带有bind的写法
	$("#outSet h5.head").bind("click", function() {
		// 获取要显示与隐藏的内容
		var $showOrHideContent = $(this).next();
		// 判断需要显示与隐藏的内容是否存在
		if ($showOrHideContent.is(":visible")) {
			$showOrHideContent.hide();
		} else {
			$showOrHideContent.show();
		}
	});
	// 另一种简写方式
	$("#outSet h5.head").click(function() {
		// 获取要显示与隐藏的内容
		var $showOrHideContent = $(this).next();
		if ($showOrHideContent.is(":visible")) {
			$showOrHideContent.hide();
		} else {
			$showOrHideContent.show();
		}
	});

	// 带有bind的写法
	$("#outSet h5.head").bind("mouseover", function() {
		$(this).next().show();
	}).bind("mouseout", function() {
		$(this).next().hide();
	});
	// 另一种简写方式
	$("#outSet h5.head").mouseover(function() {
		$(this).next().show();
	}).mouseout(function() {
		$(this).next().hide();
	});
	
	// hover(enter,leave)实现鼠标滑入、滑出效果
	$("#outSet h5.head").hover(function() {
		$(this).next().show();
	}, function() {
		$(this).next().hide();
	});
	
	// toggle(fn1,fn2,fnN)模拟鼠标连续点击事件,第一次单击触发事件fn1,第二次触发fn2,以此类推...
	$("#outSet h5.head").toggle(function() {
		$(this).next().show();
	}, function() {
		$(this).next().hide();
	});
	
	// toggle()切换元素的可见状态,如果元素是可见的,单击切换后则隐藏;如果元素是隐藏的,单击切换后则可见
	$("#outSet h5.head").toggle(function() {
		$(this).next().toggle();
	}, function() {
		$(this).next().toggle();
	});

})
</script>
<style type="text/css">
*{margin:0;padding:0;}	
#outSet { width: 300px; border: 1px solid #0050D0;margin:50px auto; }
.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block;display:none; }
</style>
</head>
<body>
<div id="outSet">
	<h5 class="head">绑定事件,显示与隐藏的写法</h5>
	<div class="content">
		君不见黄河之水天上来,奔流到海不复回。
君不见高堂明镜悲白发,朝如青丝暮成雪。
人生得意须尽欢,莫使金樽空对月。
天生我材必有用,千金散尽还复来。
烹羊宰牛且为乐,会须一饮三百杯。
岑夫子,丹丘生,将进酒,杯莫停。
与君歌一曲,请君为我侧耳听。
钟鼓馔玉不足贵,但愿长醉不复醒。
古来圣贤皆寂寞,惟有饮者留其名。
陈王昔时宴平乐,斗酒十千恣欢谑。
主人何为言少钱,径须沽取对君酌。
五花马,千金裘,
呼儿将出换美酒,与尔同销万古愁。
	</div>
</div>
</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Toggle点击事件是一种交替执行的事件,通常用于在不同的点击之间切换状态或执行不同的操作。在jQuery中,可以使用toggle方法来实现这个功能。toggle方法可以接受多个参数,每个参数都是一个要交替执行的事件。如果不传参,默认是显示和隐藏功能。 另外,在Toggle Group中挂载脚本,可以给Toggle按钮添加事件,并将Toggle Group作为参数传递给方法。这样,方法就可以根据Toggle按钮的状态来执行相应的操作。 在具体的应用场景中,例如左菜单的展开和折叠功能,可以使用toggle点击事件来实现。通过给菜单按钮添加点击事件,并使用动画效果来实现菜单的动态展开和折叠。 总结来说,toggle点击事件是一种在不同的点击之间切换状态或执行不同操作的事件,可以使用jQuery的toggle方法来实现。对于特定的应用场景,可以通过给Toggle按钮添加事件,并传递相应的参数来实现不同的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [jquery中交替点击事件toggle方法的使用示例](https://download.csdn.net/download/weixin_38516491/13053414)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Unity技术手册-UGUI零基础详细教程-Toggle切换](https://blog.csdn.net/qq_27489007/article/details/127527965)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Python UI设计学习笔记,第五课:左菜单toggle按钮的点击事件:展开和折叠左侧菜单,学习使用动画 `...](https://blog.csdn.net/u012928587/article/details/124546754)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佛佛ง

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值