jq 侧边栏点击 收缩效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
	*{ margin:0 ; padding :0;}
	.box{ width:500px; height:300px; background:red; position:relative; left: -200px;}
	.box1{width:200px; height:300px; background:green; float:left;}
	.box2{ width:300px; height:300px; background:blue; float:left;}
	</style>

	
	<script src="jquery-2.2.2.min.js"></script>
	<script>
	$(function(){
			$(".box").click(function(){
				console.log($(".box").css("left"))
				if( $(".box").position().left == -200 ){//position().left获取的是不带px的
					$(".box").animate({"left":"0"})
				}else{
					$(".box").animate({"left":"-200"})
				}
				
			})

			// $(".box").click(function(){
			// 	console.log($(".box").css("left"))
			// 	if( $(".box").css("left") == "-200px" ){//css("left")只有一个参数的时候 是取值 但是这个带有px
			// 		$(".box").animate({"left":"0"})
			// 	}else{
			// 		$(".box").animate({"left":"-200"})
			// 	}
				
			// })
	})



	</script>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
	</div>
</body>
</html>

  

相关推荐:

如何在 Flet 中通过点击图标弹出信息对话框

本文介绍如何使用flet框架实现点击iconbutton弹出带标题、正文和关闭按钮的模态信息对话框(alertdialog),并确保其正确显示与交互。 本文介绍如何使用flet框架实现点击iconbutton弹出带标题、正文和关闭按钮的模态信息对话框(alertdialog),并确保其正确显示与交互...

如何在 Selenium 中正确点击并跳转到网页中的链接列表

本文详解如何使用selenium定位、存储和交互网页中的所有超链接,包括通过click()模拟点击和通过driver.get()直接跳转两种方式,并指出常见语法错误及最佳实践。 本文详解如何使用selenium定位、存储和交互网页中的所有超链接,包括通过click()模拟点击和通过driver.ge...

如何通过XPath精准定位并点击非交互式Selenium元素

本文介绍在selenium自动化中,当目标元素被标记为非交互式(如无href、disabled、或仅含静态html结构)却需触发其隐藏行为(如展开下载链接)时,如何通过xpath精确定位并强制执行点击操作。 本文介绍在selenium自动化中,当目标元素被标记为非交互式(如无href、disable...

如何解决Selenium中连续按钮点击失败的问题

Selenium脚本单独执行某行代码正常,但整体运行时“Next”按钮点击后无法找到“FinalizeReservation”按钮——这通常是页面未完成渲染或状态未就绪导致的典型同步问题,需用显式等待替代time.sleep()。 selenium脚本单独执行某行代码正常,但整体运行时“next”按...

Python怎么实现纯桌面的鼠标键盘全自动点击录制

pynput是跨平台轻量级鼠标键盘事件录制方案,需同步时间戳、区分事件类型并保存为JSON;回放时按时间差延迟,避免权限与坐标缩放问题。 用pynput录制鼠标和键盘事件最直接 纯桌面自动化录制,不依赖图像识别或系统级宏工具,pynput是目前最轻量、跨平台(Win/macOS/Linux)、权限要...