图标切换，内容展开

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


先上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" onclick="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