利用CSS的类名切换，进行DIV的显示隐藏，简化JS

利用CSS的类名切换，进行DIV的显示隐藏，简化JS。

文章转载自http://www.yixieshi.com/ucd/12032.html

　　微博首页右侧要添加一个奥运金牌榜的模块，要求有收起和展开的按钮，用来显示不同的内容。

　　对网站来说这是很稀松平常的交互效果。具体html实现可能有同学会想到，做两个div，各自包含展开的内容和收起的内容。在点击展开按钮时出现一 个，另一个隐藏;而在点击收起的时候做相反的处理。这种事本身也没有对与错，能实现效果就好。但作为出现在微博首页的模块，并且出现在第一屏的位置，对性 能的优化肯定是要做足的。能尽量在我们css这一层做的，决不放到js那边去做。我的处理方式是把收起展开的样式都写好，放在一起，让js在默认展开或点 击展开的时候显示turn_olym_on，在点击收起的时候更换为turn_olym_off，这样js就只是更换一个class名的代码量，而对于展 开收起的两个按钮，我也通过更换的class名来显示和隐藏。

　　具体html代码：

　　在这里把所有用到的代码全部放在一起，把某种状态时不用显示的隐藏掉，比如展开状态时，class=”show_less W_linecolor”的div和展开的按钮class=”W_moredown”不用显示，就可以在最外层的div上写：

　　css暂时隐藏掉这两元素：

　　而当收起的时候，最外层的div就变成：

　　css则把之前隐藏的两个元素显示出来，并把需要隐藏的排行榜四五名class=”no_45″的tr标签、赛事重点的class=”show_more”及收起的按钮class=”W_moreup”隐藏：

　　这样，就只需要js在点击收起的时候把turn_olym_on换成turn_olym_off，而点击展开的时候把turn_olym_off换成turn_olym_on就可以了，其余的隐藏展示全部有css来搞定。

转载于:https://blog.51cto.com/ppxxll/1677435