选项卡---打开闭合状态转化

实现效果如下：

点击列表时，状态由信封的“密封”变成“打开”，信封内容显示，不点击时，为关闭状态，信封内容不显示。

<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;
}