合上展开动作优化，外加引入字体图标的使用（阿里icon）

字体图标的使用

css样式

@font-face {
  font-family: 'iconfont';  
  src: url('http://at.alicdn.com/t/font_406556_7rs0fzxer0hsq0k9.eot');
  src: url('http://at.alicdn.com/t/font_406556_7rs0fzxer0hsq0k9.eot?#iefix') format('embedded-opentype'),
  url('http://at.alicdn.com/t/font_406556_7rs0fzxer0hsq0k9.woff') format('woff'),
  url('http://at.alicdn.com/t/font_406556_7rs0fzxer0hsq0k9.ttf') format('truetype'),
  url('http://at.alicdn.com/t/font_406556_7rs0fzxer0hsq0k9.svg#iconfont') format('svg');
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-xiala:before { content: "e657"; }    //下箭头
.icon-xiala1:before { content: "e604"; }    //上箭头

html代码，在class加入类名 iconfont 和 icon-名称    即可

合上展开动作优化：

效果图

HTML代码

            

                
Q1考研预报名必须报吗？预报名之后必须要正式报名吗?
                
                    内容1
                
            
            

                
Q2 考研预报名有什么作用？
                
                    内容2
                
            
            

                
Q3考研报名注意事项
                
                    内容3
                
            
        

js代码：

// 先引入jquery
        $('.quslist li').on('click', function () {
            var isopen = $(this).find('p').find('i').hasClass('icon-xiala');
            if (isopen) {
                $(this).find('.quslist-txt').slideDown();
                $(this).find('p').find('i').removeClass('icon-xiala');
                $(this).find('p').find('i').addClass('icon-xiala1');
            } else {
                $(this).find('.quslist-txt').slideUp();
                $(this).find('p').find('i').removeClass('icon-xiala1');
                $(this).find('p').find('i').addClass('icon-xiala');
            }
        })

js代码2

// 先引入jquery
        $('.quslist li').on('click', function () {
            $(this).find('.quslist-txt').slideToggle();//取代了下面的两行注释的代码
            var isopen = $(this).find('p').find('i').hasClass('icon-xiala');
            if (isopen) {
                // $(this).find('.quslist-txt').slideDown();
                $(this).find('p').find('i').removeClass('icon-xiala');
                $(this).find('p').find('i').addClass('icon-xiala1');
            } else {
                // $(this).find('.quslist-txt').slideUp();
                $(this).find('p').find('i').removeClass('icon-xiala1');
                $(this).find('p').find('i').addClass('icon-xiala');
            }
        })