jQuery学习：显示隐藏 --点击图片显示隐藏


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="../js/jquery-3.6.1.js">script>
		<style>
			a {
				text-decoration: none;
				background: #bfa;
				padding: 2px;
				width: 10px;
				height: 10px;
			}
 
			#sharemore b {
				padding: 2px;
				width: 10px;
				height: 10px;
			}
 
 
			.lf {
				background: deeppink;
				width: 185px;
				padding: 5px;
				text-align: center;
			}
 
		
		style>
	head>
	<body>
		<div class="lf" id="dd">
			
			<span>分享到：span>
			<a href="#" class="share_sina">😀a>
			<a href="#" class="share_qq">😈a>
			<a href="#" class="share_renren">😎a>
 
			<a href="#" class="share_kaixin" style="display: none;">🤪a>
			<a href="#" class="share_douban" style="display: none;">😰a>
			
			
			<a href="#" class="sharemore" id="sharemore">
				<b class="">▶b>
			a>
		div>
		<script>
			share();
 
			function share() {
				var isClose = true; //标识当前状态是关闭
				var $sharemore = $('#sharemore');
				var $parent = $sharemore.parent();
				//查找前面所有的兄弟---只需要钱敏的两个 发现是逆序的用 html eq等测试
				var $hida = $sharemore.prevAll('a:lt(2)');
				var $b = $sharemore.children()
				//触发事件的元素
				$sharemore.click(function() {
					if (isClose) { //关闭状态
						$parent.css('width', '250');
						$b.html('◀');
						console.log($b.val())
						$hida.show();
 
					} else { //去打开
						
						$parent.css('width', '185');
							$b.html('▶');
						$hida.hide();
					}
						isClose = !isClose;
				})
			}
		script>
	body>
html>

相关阅读:
访问链表中的某个元素（快慢指针）
聊一聊系统重构
第三十九章构建数据库应用程序 - 将数据绑定到表单
Node的Web编程
数据质量问题根源剖析
Linux 如何查看.deb文件详细信息版本号包名
神经体液调节网络,神经网络能干嘛
Mybatis—动态sql和分页
力扣记录：Hot100（3）——46-72
vcluster -- 基于虚拟集群的多租户方案

原文地址：https://blog.csdn.net/weixin_47295886/article/details/127887233