<ul id="messageContainer" class="notice-ul">
<li class="clear">
<figure class="fl">
<img id="img" src="/img/notice3.png">
</figure>
<figcaption class="fl" color="#acacac">
<p class="title-p fl">10%年化收益最后一周,马上买入!</p>
<p class="time-p fr">2015-09-25 23:34:36</p>
<div class="notice-detail clear">
<p class="control-p show">10月1日起,集财平台调整加送收益率。调整后:月度产品平台加送1%年化收益率,总年化收益率为 8% ;季度产品平台加送1.5%年化收益率,总年化收益率为 9.5% 。感谢您支持集财。 </p>
</div>
</figcaption>
<p class="text-control clear">展开></p>
<p class="clear hide" >收起</p>
</li>
<li class="clear"><!--第二个消息start-->
<figure class="fl">
<img id="img" src="/img/notice3.png">
</figure>
<figcaption class="fl" color="#acacac">
<p class="title-p fl">10%年化收益最后一周,马上买入!</p>
<p class="time-p fr">2015-09-25 23:34:36</p>
<div class="notice-detail clear">
<p class="control-p show">10月1日起,集财平台调整加送收益率。调整后:月度产品平台加送1%年化收益率,总年化收益率为 8% ;季度产品平台加送1.5%年化收益率,总年化收益率为 9.5% 。感谢您支持集财。 </p>
</div>
</figcaption>
<p class="text-control clear">展开></p>
<p class="clear hide" >收起</p>
</li>
</ul>
css样式
/*消息样式start*/
.notice-content{
width: 100%;
}
.notice-ul{
width: 90%;
margin: 0 auto;
}
.notice-ul li{
padding-bottom: 10px;
border-bottom: 1px solid #ededed;
margin-bottom: 30px;
}
.notice-ul .notice-detail{
line-height: 20px;
color: #454545;
font-size: 12px;
margin-left:20px;
width: 580px;
word-break: break-all;
}
.notice-ul .notice-detail .detail-p{
width: 350px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 20px;
}
.notice-ul .notice-detail p.show{
width: 100%;
}
.notice-content .title-p{
margin-bottom: 10px;
color: #454545;
font-weight: bold;
padding-top: 5px;
margin-left: 20px;
}
.notice-content .time-p{
color: #a6a6a6;
font-size: 12px;
padding-top: 5px;
}
.notice-ul .text-control{
width: 100%;
cursor: pointer;
color: #249efc;
text-align: right;
padding-right: 20px;
position: relative;
top: -20px;
}
.notice-ul .hide{
cursor: pointer;
display: none;
width: 100%;
color: #249efc;
text-align: right;
padding-right: 20px;
}
.notice-content figcaption.pass-read .title-p,
.notice-content figcaption.pass-read .notice-detail{
color: #acacac;
}
javascript代码
$(".hide").click(function(){
var i= $(this).parent().index();
var textHide=$(this).parent().find(".control-p").eq(0);
textHide.removeClass("show").addClass("detail-p");
$(this).hide();
var textControl=$(this).parent().find(".text-control").eq(0);
textControl.show();
})
$(".text-control").click(function(){
var i= $(this).parent().index();
var textControl=$(this).parent().find(".control-p").eq(0);
textControl.removeClass("detail-p").addClass("show");
$(this).hide();
var textHide=$(this).parent().find(".hide").eq(0);
textHide.show();
})