`
david803
  • 浏览: 6204 次
  • 性别: Icon_minigender_1
  • 来自: 东莞
最近访客 更多访客>>
社区版块
存档分类
最新评论

关于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,目录树就可以显示在你的视野中了,哈哈。

 

  • 大小: 15.5 KB
  • 大小: 5.9 KB
分享到:
评论

相关推荐

    绝对有用的TreeView结构导航[Jquery]

    - `.level2` 类则表示二级或更深层次的子节点,初始状态为隐藏(`display:none`)。 ### 3. CSS样式 CSS部分负责定义了TreeView的外观。关键样式包括: - `.menu`:定义菜单宽度和高度,以及去除列表默认的边距和...

    div+css实现treeview功能

    2. **CSS样式**:为这些元素添加样式,使它们看起来像一个树形结构。例如,隐藏默认的列表样式,设置节点的缩进以表现层级,以及定义展开/折叠的过渡效果。 ```css .treeview ul { list-style: none; padding-...

    jQuery多级下拉树状菜单

    jQuery多级下拉树状菜单是一种常见的网页交互元素,它允许用户通过展开和折叠的方式查看和操作层次结构的数据。在Web开发中,这种菜单通常用于导航、目录展示或复杂选项的组织。本教程将深入探讨如何使用jQuery实现...

    jquery树.zip

    通过CSS样式可以实现节点的折叠与展开效果,例如使用`display:none`隐藏子节点,当点击父节点时,通过改变CSS类名来显示子节点: ```css .tree li ul { display: none; } .tree li.open > ul { display: block; }...

    jquery树型

    5. **动画效果**:jQuery提供了一系列动画方法,如`slideToggle()`,可以为展开和收起节点添加平滑的过渡效果,提升用户体验。 以下是一个简单的jQuery树型结构示例: ```html 父节点 ...

    使用CSS和JQueryHTML中的Treeview

    这个JQuery代码会在页面加载完成后监听所有的`<li>`元素,当用户点击一个列表项时,会添加或移除"open"类,同时使用`slideToggle`方法平滑地展开或折叠对应的子级列表。 结合以上HTML、CSS和JQuery代码,你就可以...

    多种左侧树形菜单导航

    8. **插件使用**:开发过程中可能会使用现有的JavaScript库或插件,如jQuery UI的Treeview、Bootstrap的TreeView等,它们提供了预设的样式和功能,能快速搭建树形菜单。 9. **性能优化**:对于大型菜单,需要考虑...

    使用jquery做树组件

    此外,也可以考虑使用现有的jQuery插件,如jQuery UI的Treeview或者jQuery Tree,它们提供了更丰富的功能和定制选项。 总的来说,创建一个jQuery树组件涉及到HTML结构设计、CSS样式定义、JavaScript事件处理以及...

    基于JQuery做的Accordion菜单源程

    display: none; /* 默认隐藏内容区域 */ transition: height 0.5s ease-in-out; /* 添加过渡动画 */ } ``` 此外,`development-bundle`和`js`文件夹可能包含JQuery库的不同版本或者其他自定义JavaScript脚本,...

    利用JQuery实现网页左侧树形菜单(IE6 IE7 Firefox下测试通过)

    在实际开发中,你还可以考虑使用插件如jQuery UI的Accordion或jQuery Treeview来简化这个过程,但手动实现能更好地理解底层逻辑。 通过这个项目,你不仅学会了如何使用jQuery实现树形菜单,还了解了浏览器兼容性...

    树形菜单栏(html)

    树形菜单栏在网页设计中是一种常见的交互元素,主要用于组织和展示层次结构的数据或功能模块。在HTML中实现树形菜单栏,通常结合JavaScript、CSS以及可能的服务器端技术来完成。这里我们将深入探讨如何使用HTML和...

    JavaScript树形菜单

    2. **CSS样式**:为菜单添加样式,如展开/折叠状态的箭头,以及隐藏/显示子节点的样式。 ```css .toggle { cursor: pointer; } .children { display: none; /* 默认隐藏子节点 */ } ``` 3. **JavaScript逻辑**...

    jquery产品树形介绍页特效

    display: none; /* 默认隐藏子层级 */ } ``` 四、jQuery实现树形结构 1. 初始加载时,所有子层级默认隐藏。使用`.hide()`方法: ```javascript $("#productTree li ul").hide(); ``` 2. 为父节点添加点击事件,...

    懒加载案例lazyload

    - **预加载样式**:为即将进入视口的元素设置一些初始样式,如高度、宽度,避免因加载内容导致页面布局突变。 4. **JavaScript实现**: - **监听滚动事件**:使用`window.onscroll`或`addEventListener('scroll',...

    jquery树形菜单

    **jQuery树形菜单详解** jQuery库是Web开发中广泛使用的JavaScript库,以其简洁的API和强大的功能深受开发者喜爱。在创建交互式用户界面时,树形菜单是一种常见且实用的元素,尤其适用于组织大量层级数据。本文将...

    简单html示例

    在这个代码片段中,`onclick`属性定义了按钮被点击时执行的JavaScript函数`processInput()`,`id`属性为输入框设定了唯一的标识符,使得在JavaScript中可以通过`document.getElementById('userInput')`获取到这个...

    bootstrap树形下拉框 下拉框树形菜单

    <div id="treeview" style="display:none;"> <!-- 这里是隐藏的树形结构,用于初始化树形菜单 --> ``` 然后,利用JavaScript和jQuery初始化树形结构,并将其内容填充到下拉框中。代码可能如下: ```javascript $...

    JSP项目中JAVASCRIPT 树形菜单

    在JSP(JavaServer Pages)项目中,JavaScript通常被用来为用户提供动态交互的功能,而树形菜单就是一种常见的用户界面元素。它可以帮助用户以层级结构浏览和操作数据,常见于文件系统、组织架构或者导航菜单等场景...

    Jquery 树形菜单

    <ul class="children" style="display:none;"> 子节点1 子节点2 ... ``` 然后,用jQuery添加点击事件: ```javascript $(document).ready(function() { $('#tree li').click(function() { $(this).find...

Global site tag (gtag.js) - Google Analytics