需求：

菜单展开时，图标向下；菜单隐藏时，图标向上

具体实现：

重点是，根据不同的显示，引用不同的图标

<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4286070_7oq9jb9qkt5.css">
<style>
  .about_lt_bd dt{
  padding:0 10px;
  background: #eaeaea;
  border-bottom: 1px solid #fff;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}
.about_lt_bd dt i{
  float: right;
  font-size: 12px;
}
.about_lt_bd.show dt .iconfont::before{
  content: '\e79b';
}
.about_lt_bd.hide dt .iconfont::before{
  content: '\e79c';
}
.about_lt_bd.show dd{
  display: block;
}
.about_lt_bd.hide dd{
  display: none;
}
.about_lt_bd dd{
  border: 1px solid #dedede;
  padding: 5px 20px;
}
.about_lt_bd dd a{
  display: block;
  line-height: 24px;
}
.about_lt_bd dd a.active,.about_lt_bd dd a:hover{
  font-weight: bold;
  color: green;
}
</style>
<dl class="about_lt_bd show">
        <dt>购物指南<i class="iconfont"></i></dt>
        <dd>
                    <a href="/home/about/details/id/2.html"  class="active">购物流程</a>
                    <a href="/home/about/details/id/3.html" >会员介绍</a>
                    <a href="/home/about/details/id/4.html" >常见问题</a>
                    <a href="/home/about/details/id/5.html" >优惠政策</a>
                    <a href="/home/about/details/id/6.html" >发票制度</a>
                  </dd>
      </dl>
            <dl class="about_lt_bd hide">
        <dt>售后服务<i class="iconfont"></i></dt>
        <dd>
                    <a href="/home/about/details/id/7.html" >售后政策</a>
                    <a href="/home/about/details/id/8.html" >退款/换货</a>
                    <a href="/home/about/details/id/9.html" >退款维权流程</a>
                    <a href="/home/about/details/id/10.html" >价格保护</a>
                    <a href="/home/about/details/id/11.html" >取消订单</a>
                  </dd>
      </dl>
      <script>
        $(function(){
  $('.about_lt_bd>dt').click(function(t){
		var dl = $(this).parent();
		if( dl.find('dd').is(":hidden") ){
      dl.addClass('show').removeClass('hide');
      dl.siblings().addClass('hide').removeClass('show');
		}else{
      dl.addClass('hide').removeClass('show');
		}		
	});
})
      </script>