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

最新推荐文章于 2023-09-14 18:51:30 发布

¡Venceremo

最新推荐文章于 2023-09-14 18:51:30 发布

阅读量490

点赞数

分类专栏： jquery 文章标签： jquery 学习 javascript

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127887233

版权

jquery 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

<!DOCTYPE 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">&#x1F600;</a>
			<a href="#" class="share_qq">&#x1F608;</a>
			<a href="#" class="share_renren">&#x1F60E;</a>

			<a href="#" class="share_kaixin" style="display: none;">&#x1F92A;</a><!-- 需要改变显示 -->
			<a href="#" class="share_douban" style="display: none;">&#x1F630;</a><!-- 需要改变宽度 -->
			<!-- &#x25B6;
			&#x25C0;</a> -->
			<!-- 触发事件 -->
			<a href="#" class="sharemore" id="sharemore">
				<b class="">&#x25B6;</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('&#x25C0;');
						console.log($b.val())
						$hida.show();

					} else { //去打开
						
						$parent.css('width', '185');
							$b.html('&#x25B6;');
						$hida.hide();
					}
						isClose = !isClose;
				})
			}
		</script>
	</body>
</html>