jQuery非常非常棒,不但能帮你轻松实现很多很多你想要的“美妙”效果,而且还不影响页面的SEO优化,大家应该知道,如果js或ajax用多了,SEO将是非常糟糕的,原因,我不想多说,总之,一点,js只能参与控制网页元素,不能参与内容控制,否则,将大大地对SEO优化不利,
就凭这一点,已经足够让我喜欢jQuery了。
用jQuery,可以完全只操控页面上的元素,而不参考内容的控制,这个对于SEO来讲,非常不错地选择,所以,我很爱jQuery。
在jQuery中,有一个插件,很实用,而且用的很多,就是jquery.treeview插件,这是个树型目录插件,我想,大家应该熟悉树型目录吧。
最近,我在作一网站项目,其中,后台管理中,我仿造了phpcms的后台界面,但是,左侧菜单的样式我没有仿造它的,而是用了jquery.treeview,然后,用了一个tab效果,来实现不同的导航切换不同的子菜单目录,好,问题来了,大家知道,用tab切换不同的层的效果无非就是使用样式display:none来现实的,大概效果如下图,
导航用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
分享到:
相关推荐
- `.level2` 类则表示二级或更深层次的子节点,初始状态为隐藏(`display:none`)。 ### 3. CSS样式 CSS部分负责定义了TreeView的外观。关键样式包括: - `.menu`:定义菜单宽度和高度,以及去除列表默认的边距和...
2. **CSS样式**:为这些元素添加样式,使它们看起来像一个树形结构。例如,隐藏默认的列表样式,设置节点的缩进以表现层级,以及定义展开/折叠的过渡效果。 ```css .treeview ul { list-style: none; padding-...
jQuery多级下拉树状菜单是一种常见的网页交互元素,它允许用户通过展开和折叠的方式查看和操作层次结构的数据。在Web开发中,这种菜单通常用于导航、目录展示或复杂选项的组织。本教程将深入探讨如何使用jQuery实现...
通过CSS样式可以实现节点的折叠与展开效果,例如使用`display:none`隐藏子节点,当点击父节点时,通过改变CSS类名来显示子节点: ```css .tree li ul { display: none; } .tree li.open > ul { display: block; }...
5. **动画效果**:jQuery提供了一系列动画方法,如`slideToggle()`,可以为展开和收起节点添加平滑的过渡效果,提升用户体验。 以下是一个简单的jQuery树型结构示例: ```html 父节点 ...
这个JQuery代码会在页面加载完成后监听所有的`<li>`元素,当用户点击一个列表项时,会添加或移除"open"类,同时使用`slideToggle`方法平滑地展开或折叠对应的子级列表。 结合以上HTML、CSS和JQuery代码,你就可以...
8. **插件使用**:开发过程中可能会使用现有的JavaScript库或插件,如jQuery UI的Treeview、Bootstrap的TreeView等,它们提供了预设的样式和功能,能快速搭建树形菜单。 9. **性能优化**:对于大型菜单,需要考虑...
此外,也可以考虑使用现有的jQuery插件,如jQuery UI的Treeview或者jQuery Tree,它们提供了更丰富的功能和定制选项。 总的来说,创建一个jQuery树组件涉及到HTML结构设计、CSS样式定义、JavaScript事件处理以及...
display: none; /* 默认隐藏内容区域 */ transition: height 0.5s ease-in-out; /* 添加过渡动画 */ } ``` 此外,`development-bundle`和`js`文件夹可能包含JQuery库的不同版本或者其他自定义JavaScript脚本,...
在实际开发中,你还可以考虑使用插件如jQuery UI的Accordion或jQuery Treeview来简化这个过程,但手动实现能更好地理解底层逻辑。 通过这个项目,你不仅学会了如何使用jQuery实现树形菜单,还了解了浏览器兼容性...
树形菜单栏在网页设计中是一种常见的交互元素,主要用于组织和展示层次结构的数据或功能模块。在HTML中实现树形菜单栏,通常结合JavaScript、CSS以及可能的服务器端技术来完成。这里我们将深入探讨如何使用HTML和...
2. **CSS样式**:为菜单添加样式,如展开/折叠状态的箭头,以及隐藏/显示子节点的样式。 ```css .toggle { cursor: pointer; } .children { display: none; /* 默认隐藏子节点 */ } ``` 3. **JavaScript逻辑**...
display: none; /* 默认隐藏子层级 */ } ``` 四、jQuery实现树形结构 1. 初始加载时,所有子层级默认隐藏。使用`.hide()`方法: ```javascript $("#productTree li ul").hide(); ``` 2. 为父节点添加点击事件,...
- **预加载样式**:为即将进入视口的元素设置一些初始样式,如高度、宽度,避免因加载内容导致页面布局突变。 4. **JavaScript实现**: - **监听滚动事件**:使用`window.onscroll`或`addEventListener('scroll',...
**jQuery树形菜单详解** jQuery库是Web开发中广泛使用的JavaScript库,以其简洁的API和强大的功能深受开发者喜爱。在创建交互式用户界面时,树形菜单是一种常见且实用的元素,尤其适用于组织大量层级数据。本文将...
在这个代码片段中,`onclick`属性定义了按钮被点击时执行的JavaScript函数`processInput()`,`id`属性为输入框设定了唯一的标识符,使得在JavaScript中可以通过`document.getElementById('userInput')`获取到这个...
<div id="treeview" style="display:none;"> <!-- 这里是隐藏的树形结构,用于初始化树形菜单 --> ``` 然后,利用JavaScript和jQuery初始化树形结构,并将其内容填充到下拉框中。代码可能如下: ```javascript $...
在JSP(JavaServer Pages)项目中,JavaScript通常被用来为用户提供动态交互的功能,而树形菜单就是一种常见的用户界面元素。它可以帮助用户以层级结构浏览和操作数据,常见于文件系统、组织架构或者导航菜单等场景...
<ul class="children" style="display:none;"> 子节点1 子节点2 ... ``` 然后,用jQuery添加点击事件: ```javascript $(document).ready(function() { $('#tree li').click(function() { $(this).find...