解决页面刷新累积点击事件的问题

正常的效果是这样的

描述：点击左侧的树结构右侧会刷新页面，同时会累加底部显示更多的点击效果
产生这种的原因主要是代码的执行的顺序不正确：一开始我将这段代码放在了右侧加载数据的函数当中，也就是左侧一点击树形结构，右侧的页面就会随之刷新
所以为了避免刷新带来的点击事件的累积，应该将点击效果的代码放到window.onload中。
解决

onload 事件会在页面或图像加载完成后立即发生

实现代码：

window.onload = function() {
	//加载树形结构
//点击显示更多效果
	$(".show-more-btn").on("click",function(){
		 if($(this).hasClass("down")){
			 	$(this).parent().next().slideDown(200);
                $(this).parent().next().next().slideDown(200);
                $(this).html('隐藏显示<img src="../../../include/images/dropTop.png" alt="up" class="drop-down-icon">');
                
                $(this).removeClass("down");
            }else{
            	$(this).parent().next().slideUp(200);
	            $(this).parent().next().next().slideUp(200);
	            $(this).html('显示更多<img src="../../../include/images/dropDown.png" alt="down" class="drop-down-icon">')
      
                $(this).addClass("down");
            }
	 })
}

最后顺便提下window.onload和$(document).ready(function(){})的区别
（原文出自：http://www.php100.com/html/program/jquery/2013/0905/5954.html）

【这就是为什么这里使用window.onload的原因】