jQuery之标题与内容的显示与隐藏

最新推荐文章于 2022-08-18 17:15:02 发布

gyuei

最新推荐文章于 2022-08-18 17:15:02 发布

阅读量943

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/gyueh/article/details/106120694

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需求：页面中有多条系统消息列表，点击其中一条消息时显示相应的消息内容而标题隐藏。
默认第一条消息显示内容不显示标题，如图：在这里插入图片描述

点击第3条消息时，显示第三条信息的内容而标题隐藏
在这里插入图片描述

html部分代码如下：

<div class="hx-bottom_content">
	<div class="hx-news_item">
		<div class="row hx-news_title">
			<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 hx-news_left">
				<a href="javascript:;" class="hx-news_content">
					<i></i>
					<h4>拼箱市场上线啦1</h4>
				</a>
			</div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right hx-news_right">
				2020-04-02 14:20:32
			</div>
		</div>
		<div class="row hx-news_info">
			<div class="col-lg-3 col-md-4 col-sm-3 col-xs-6 hx-box_left">
				<img src="images/news_picture@2x.png">
			</div>
			<div class="col-lg-9 col-md-8 col-sm-9 col-xs-6 hx-box_right">
				<h3>拼箱市场上线啦</h3>
				<span>2020-04-01</span>
				<div class="hx-detail">箱运网已成功打通箱盟乐运拼箱平台！</div>
				<a href="#">查看详情 ></a>
			</div>
		</div>
	</div>
	<div class="hx-news_item">
		<div class="row hx-news_title">
			<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 hx-news_left">
				<a href="javascript:;" class="hx-news_content">
					<i></i>
					<h4>拼箱市场上线啦2</h4>
				</a>
			</div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right hx-news_right">
				2020-04-02 14:20:32
			</div>
		</div>
		<div class="row hx-news_info">
			<div class="col-lg-3 col-md-4 col-sm-3 col-xs-6 hx-box_left">
				<img src="images/news_picture@2x.png">
			</div>
			<div class="col-lg-9 col-md-8 col-sm-9 col-xs-6 hx-box_right">
				<h3>拼箱市场上线啦</h3>
				<span>2020-04-01</span>
				<div class="hx-detail">箱运网已成功打通箱盟乐运拼箱平台！</div>
				<a href="#">查看详情 ></a>
			</div>
		</div>
	</div>
	<div class="hx-news_item">
		<div class="row hx-news_title">
			<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 hx-news_left">
				<a href="javascript:;" class="hx-news_content">
					<i></i>
					<h4>拼箱市场上线啦3</h4>
				</a>
			</div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right hx-news_right">
				2020-04-02 14:20:32
			</div>
		</div>
		<div class="row hx-news_info">
			<div class="col-lg-3 col-md-4 col-sm-3 col-xs-6 hx-box_left">
				<img src="images/news_picture@2x.png">
			</div>
			<div class="col-lg-9 col-md-8 col-sm-9 col-xs-6 hx-box_right">
				<h3>拼箱市场上线啦</h3>
				<span>2020-04-01</span>
				<div class="hx-detail">箱运网已成功打通箱盟乐运拼箱平台！</div>
				<a href="#">查看详情 ></a>
			</div>
		</div>
	</div>
	<div class="hx-news_item">
		<div class="row hx-news_title">
			<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 hx-news_left">
				<a href="javascript:;" class="hx-news_content">
					<i></i>
					<h4>拼箱市场上线啦4</h4>
				</a>
			</div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right hx-news_right">
				2020-04-02 14:20:32
			</div>
		</div>
		<div class="row hx-news_info">
			<div class="col-lg-3 col-md-4 col-sm-3 col-xs-6 hx-box_left">
				<img src="images/news_picture@2x.png">
			</div>
			<div class="col-lg-9 col-md-8 col-sm-9 col-xs-6 hx-box_right">
				<h3>拼箱市场上线啦</h3>
				<span>2020-04-01</span>
				<div class="hx-detail">箱运网已成功打通箱盟乐运拼箱平台！</div>
				<a href="#">查看详情 ></a>
			</div>
		</div>
	</div>
	<div class="hx-news_item">
		<div class="row hx-news_title">
			<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 hx-news_left">
				<a href="javascript:;" class="hx-news_content">
					<i></i>
					<h4>拼箱市场上线啦5</h4>
				</a>
			</div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right hx-news_right">
				2020-04-02 14:20:32
			</div>
		</div>
		<div class="row hx-news_info">
			<div class="col-lg-3 col-md-4 col-sm-3 col-xs-6 hx-box_left">
				<img src="images/news_picture@2x.png">
			</div>
			<div class="col-lg-9 col-md-8 col-sm-9 col-xs-6 hx-box_right">
				<h3>拼箱市场上线啦</h3>
				<span>2020-04-01</span>
				<div class="hx-detail">箱运网已成功打通箱盟乐运拼箱平台！</div>
				<a href="#">查看详情 ></a>
			</div>
		</div>
	</div>
</div>

css部分代码如下：

.hx-bottom_content {
	padding-bottom: 88px;
	padding-top: 18px;
}
.hx-news_item {
	width: 100%;
	border-bottom: 1px dashed rgba(233, 233, 233, 1);
}
.hx-news_item:first-of-type .hx-news_title{
	display: none;
}
.hx-news_item:first-of-type .hx-news_info{
	display: block;
}
.hx-news_left {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-left: 0;
}
.hx-news_left:hover a {
	color: #249EEF;
}
.hx-news_right {
	margin-top: 10px;
	margin-bottom: 10px;
	padding-right: 0;
}
@media screen and (max-width: 768px) {
    .hx-news_title .hx-news_right{
        font-size: 12px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
    }
}
.hx-news_info{
	display: none;
	margin: 0;
	overflow: hidden;height: 130px;padding:8px 0;
}
.hx-news_info:hover{
	cursor: pointer;
}
.hx-news_info .hx-box_right .hx-detail{
	margin: 5px 0;
	height: 40px;
	overflow: hidden;
 }
 .hx-box_left {
	padding-left: 0;
}
.hx-box_left img{
	width: 148px;
	height: 112px;
}
.hx-box_right {
	display: flex;
	flex-direction: column;
	padding-right: 0;
	height: 100%;
	justify-content: space-between;
}
.hx-box_right h3{
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.hx-box_right span {
	color: #242424;
	margin-top: 5px;
}
.hx-box_right a{
	color: #249EEF;
}
.hx-box_right a:hover{
	text-decoration: none;
}
.hx-news_info .hx-box_right .hx-detail{
	margin: 5px 0;
	height: 40px;
	overflow: hidden;
 }

js部分代码如下：

<script type="text/javascript">
	$(function() {
		//控制元素显示与隐藏
		var items = document.getElementsByClassName("hx-news_item");
		for (var i = 0; i <= items.length - 1; i++) {
			var isTitle = items[i].getElementsByClassName("hx-news_title")[0];
			$(isTitle).on("click", function(e) {
				$(this).parent().siblings(".hx-news_item").children("div.hx-news_title").css("display", "block")
				$(this).parent().siblings(".hx-news_item").children("div.hx-news_info").css("display", "none")
				$(this).css('display', 'none');
				console.log($(this))
				$(this).siblings(".hx-news_info").css('display', 'block');
			})
		}
	});
</script>