关于jQuery.treeview在父级容器样式为display:none时,出现异常的解决方法!

jQuery非常非常棒,不但能帮你轻松实现很多很多你想要的“美妙”效果,而且还不影响页面的SEO优化,大家应该知道,如果js或ajax用多了,SEO将是非常糟糕的,原因,我不想多说,总之,一点,js只能参与控制网页元素,不能参与内容控制,否则,将大大地对SEO优化不利, 就凭这一点,已经足够让我喜欢jQuery了。

用jQuery,可以完全只操控页面上的元素,而不参考内容的控制,这个对于SEO来讲,非常不错地选择,所以,我很爱jQuery。

在jQuery中,有一个插件,很实用,而且用的很多,就是jquery.treeview插件,这是个树型目录插件,我想,大家应该熟悉树型目录吧。

最近,我在作一网站项目,其中,后台管理中,我仿造了phpcms的后台界面,但是,左侧菜单的样式我没有仿造它的,而是用了jquery.treeview,然后,用了一个tab效果,来实现不同的导航切换不同的子菜单目录,好,问题来了,大家知道,用tab切换不同的层的效果无非就是使用样式display:none来现实的,大概效果如下图,仿造phpcms后台管理界面
导航用tab,左侧菜单用jquery.treeview插件实现,但是,我遇到了一个奇怪的问题,就是,左侧目录菜单树中的“+”号和“-”号全反了,也就是说,当折叠的时候,它变成“-”号,当展开时,它变成“+”号,我找啊找啊,我开始以为是jquery.treeview的程序问题,发了大量的时间去研究程序,结果,发现,并不是程序的问题,而是因为display层的初始样式我把它设成style="display:none"的原因。后来,经过研究,原因终于弄明白了,当父级容器的display为none时,它下面的子元素的display是获取不到的,所以jquery.treeview的显示样式会出错乱套。

不能用display:none方法实现tab效果,只能另想其它办法了,最后,我把父级容器display层的style="display:none"去掉,换成class="hide_to_left",点击导航tab标签时,再用jquery把它换成class="show_menu",两个样式具体内容如下:

.hide_to_left{ overflow:hidden; margin:0 0 0 -500px; float:left;}
.show_menu{ overflow:hidden; margin:0;float:left;}

照样可以实现tab的效果。原理很简单,默认情况下,display层都是看不见的,因为margin-left为-500,而且overflow又是hidden,所以,不管是在firefox还是在ie中,都是隐藏不见的,当点击导航tab时,再把mqrgin-left设置成0,目录树就可以显示在你的视野中了,哈哈。

 

你可能感兴趣的:(jquery,Ajax,IE,项目管理,firefox)