图标切换，内容展开

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

先上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

 
 
  
  
阅读全文
                                             
        0        0           
	
				
	
					   
图标切换，内容展开
	  	   
CtreeCtrl节点展开关闭切换图标
	  	   
再谈bom展开[内容转载]
	  	   
用sed展开文件内容
	  	   
展开收起内容实现代码
	  	   
动态切换TabHost图标
	  	   
MFC托盘图标切换
	  	   
iOS切换APP图标
	  	   
替换TWaver中Tree展开合并图标
	  	   
ImageView实现RadioButton切换图标
	  	   
cocos2dx 按钮随按下切换图标
	  	   
图标切换两种状态
	  	   
列表图标动画切换特效
	  	   
工作笔记之图标切换
	  	   
jquery切换图标选项卡
	  	   
JQuery展开关闭内容块效果
	  	   
查看宏展开后的内容
	  	   
jQuery单击按钮，按钮变，内容展开
	     		  
	  	   
VB.NET总结
	  	   
vue--mounted
	  	   
java中IO流中的标准输入输出流
	  	   
前端知识点整理系列（二）—— apply() call() bind()
	  	   
java中IO流中的转换流
	  	   
图标切换，内容展开
	  	   
【PostgreSQL-9.6.3】设置log参数
	  	   
ARGB与RGB、RGBA的区别
	  	   
Torch SpatialZeroPadding 实例
	  	   
Java基础练习项目-猜字母小游戏
	  	   
正则化
	  	   
java中IO流中的 打印流
	  	   
染色 HYSBZ
	  	   
Mosquitto搭建Android推送服务（三）Mosquitto集群搭建