实现效果如下:
点击列表时,状态由信封的“密封”变成“打开”,信封内容显示,不点击时,为关闭状态,信封内容不显示。
<div class="dynamic_info">
<ul class="t-message">
<li class="t-current">
<a>
<img src="images/mission-detail/letter.png" class="t-open" />
<img src="images/mission-detail/letter2.png" class="t-close" />
<span>梦想计算器|你离梦想有多远?(内有圆梦福利)</span>
</a>
<div class="t-open-letter-con">
<p>作为一名小白领/创业者</p>
<p>你有认真算过</p>
<p>在自己工作所在的城市里生活下去,需要花费多少成本吗?</p>
<p>买车、买房、结婚、培养小孩......无一不需要花钱。</p>
<p>但是,看着手中那点可怜的工资......</p>
<p>要实现这个梦想真实遥遥无期。</p>
<p>戳进来:http://s.epwk.com/thread-42102-1-1.html</p>
<p>离梦想更近一步!</p>
</div>
</li>
<li>
<a>
<img src="images/mission-detail/letter.png" class="t-open" />
<img src="images/mission-detail/letter2.png" class="t-close" />
<span>15天接单大赛圆满落幕:最高接单金额达33万+</span>
</a>
<div class="t-open-letter-con">
<p>作为一名小白领/创业者</p>
<p>你有认真算过</p>
<p>在自己工作所在的城市里生活下去,需要花费多少成本吗?</p>
<p>买车、买房、结婚、培养小孩......无一不需要花钱。</p>
<p>但是,看着手中那点可怜的工资......</p>
<p>要实现这个梦想真实遥遥无期。</p>
<p>戳进来:http://s.epwk.com/thread-42102-1-1.html</p>
<p>离梦想更近一步!</p>
</div>
</li>
</ul>
</div>
js主要的函数功能不多,就是给点击的列表添加:.t-current样式,所以主要的控制是在css
$('.t-message li').click(function() {
var index = $(this).index();
$(this).addClass('t-current');
$(this).siblings().removeClass('t-current');
});
li {
list-style: none;
}
.t-message {
padding: 0 20px;
}
.t-message li {
padding: 15px 0;
}
.t-delete-pic {
width: 15px;
height: 15px;
margin-left: 12px;
}
.t-message li a:hover {
color: #fe6a03;
cursor: pointer;
}
.t-open-letter-con {
width: 400px;
min-height: 10px;
display: none;
}
.t-open-letter-con p {
line-height: 23px;
}
.t-message li .t-open {
display: none;
}
//当添加了.t-current样式时,信封为关闭状态的内容就隐藏起来,同时打开状态的内容设为显示状态
.t-message li.t-current .t-close {
display: none;
}
.t-message li.t-current .t-open-letter-con,
.t-message li.t-current .t-open {
display: block;
}
.publishBtn:hover {
background-color: #fe6a03;
color: white;
}