图标切换，内容展开

制作效果是：点击+号图标，展开章节下面内容：

先上html:

<div  style="padding: 10px 10px 0px 10px; display: block; margin:0;  border:0;">
        <h3 style=" height: 60px; line-height: 60px;background-color: Gainsboro; margin:0;" >
            <i class="glyphicon glyphicon-th-list  " style=" letter-spacing: 1em;
                padding-left: 20px"></i>口语练习的最大问题<a class="glyphicon glyphicon-minus  pull-right"
                    style="line-height: 60px; padding-right: 20px" οnclick="listhone(this)"></a></h3>
        <p style="padding-left: 20px;">
            <i class="glyphicon glyphicon-play " style="letter-spacing: 1em;"></i><span>1-1 不敢开口怕出错</span>
            <i class="glyphicon glyphicon-ok-sign pull-right" style="color: Chartreuse; padding-right: 20px">
            </i>
        </p>
        <p style="padding-left: 20px;">
            <i class="glyphicon glyphicon-play " style="letter-spacing: 1em;"></i><span>1-2 词汇量太少不知如何表达</span>
            <i class="glyphicon glyphicon-ok-sign pull-right" style="color: Chartreuse; padding-right: 20px">
            </i>
        </p>
        <p style="padding-left: 20px;">
            <i class="glyphicon glyphicon-play " style="letter-spacing: 1em;"></i><span>1-3 词不达意</span><i
                class="glyphicon glyphicon-ok-sign pull-right" style="color: Chartreuse; padding-right: 20px">
            </i>
        </p>
    </div>

为了实现一一对应展开，在<a>里面增加了onclick事件的函数listhone(this)，里面一定要加this,函数中的div是随便取的名字，可以改为任意的，刚开始没用this，怎么都不对，
调试显示函数中的this是Windows，在函数加了this，就可以了，查了一下，说this是当前对象，谁触发就是谁，js代码如下：

function listhone(div) {


                    if ($(div).parent().siblings().css("display") == "block") {
                        $(div).parent().siblings().css("display", "none");
                                      $(div).toggleClass(" glyphicon-minus  glyphicon-plus");
       
                    }
                    else {
                        $(div).parent().siblings().css("display", "block");
                        $(div).toggleClass(" glyphicon-minus  glyphicon-plus");
                           }
                }

每天都记录一下所遇到的问题及解决办法，要不然过一段时间忘了，复盘总结。第一次用不会用，格式老不对

参考文献：

http://www.cnblogs.com/alex-toni/p/5780911.html

https://jingyan.baidu.com/article/9c69d48fa14b0313c9024edd.html