位置: 编程技术 - 正文
以JavaScript来实现WordPress中的二级导航菜单的方法(用js实现类的方法)
编辑：rootadmin推荐整理分享以JavaScript来实现WordPress中的二级导航菜单的方法(用js实现类的方法)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:javascript举例,用js实现类的方法,js用来实现什么,用javascript,javascript举例,js用来实现什么,js用来实现什么,用javascript,内容如对您有帮助，希望把文章链接给更多的朋友！
导航菜单导航菜单早已 "深入民心", 在博客上的应用日益重要且多样. 从本文开始, 我将开展几个关于 WordPress 导航菜单的话题, 讨论如何在 WordPress 上使用和加强导航菜单, 话题间有一定的承接关系, 难度也会逐步增加.
WordPress 上的导航菜单一般有两种, 页面导航菜单和分类导航菜单.可曾记得&#; WordPress 是可以撰写独立页面的, 页面导航菜单就是以首页和各个独立页面组成的菜单. 而分类导航菜单则是以首页和各个分类组成的菜单.这是效果演示既然菜单由首页和独立页面列表或首页和分类列表所组成, 我们就需要处理两个环节, 即首页菜单项和其他菜单项.另外, 我们还需要处理菜单项的三个状态, 即一般状态, 当前菜单项状态 (如: 在首页中, 首页菜单项就是当前菜单项) 和选中菜单项状态.也就是说, 我们共需要处理 3 个事情:1. 首页外的其他菜单项2. 首页菜单项3. 菜单项处于不同状态时的视觉效果
预想结构:
页面导航菜单
1. 独立页面列表作为菜单项调用 wp_list_pages 获取独立页面列表, 并使用以下参数:depth: 列表深度(层的最大数量), 本文讨论的是一级菜单, 故最大深度为 1title_li: 标题字符串, 这里不需要, 设为 0sort_column: 列表项的排序方式, 根据创建页面时所设定的 order 进行升序排列打印独立页面菜单项的语句是:
2. 首页菜单项由于一般独立页面的 class 是 page_item, 当前独立页面的 class 是 current_page_item. 当页面是首页时, 首页菜单项的 class 应该是 current_page_item, 其他情况则是 page_item. 为此, 我们需要一段分支代码来为它确定 class:
打印首页菜单项的语句是:
3. 菜单的样式这是一个从普遍到特殊的处理过程, 一般菜单项的样式放前面, 当前和选中菜单项的样式放在后面, 当后者条件满足就会覆盖前者的样式, 从而改变外观.
分类导航菜单
1. 分类列表作为菜单项调用方法 wp_list_categories 获取分类列表, 并使用以下参数:depth: 列表深度(层的最大数量), 本文讨论的是一级菜单, 故最大深度为 1title_li: 标题字符串, 这里不需要, 设为 0orderby: 列表项的排序方式, 根据创建页面时所设定的 order 进行升序排列show_count: 是否显示该分类的文章数量, 这里不需要显示, 设为 0打印分类菜单项的语句是:
2. 首页菜单项与页面导航菜单相似, 只是菜单项的 class 有所不同.page_item 更改为 cat-itemcurrent_page_item 更改为 current-cat
3. 菜单的样式因为菜单项的 class 略有不同, 所以也需稍作修改.current_page_item 更改为 current-cat
二级导航菜单
我们已经知道菜单如何创建了, 这回我们要使用分类列表做成二级导航菜单. 我们要做的其实是在原有的基础上改出二级菜单, 以及对二级菜单进行处理. (请确保的的分类中包含子分类, 否则调不出二级菜单.)我们共需要处理 3 个事情:1. 调出二级菜单 (子分类)2. 二级菜单的样式3. 二级菜单的效果
预想结构
实施操作
1. 调出二级菜单 (子分类)是否还记得制作导航菜单时是如何设定列表深度的&#; 当时将深度设为 1 是为了不显示子分类, 现在要二级子分类当然要将深度设为 2 了.depth: 列表深度(层的最大数量), 本文讨论的是二级菜单, 故最大深度为 2.打印分类菜单项的语句是:
2. 二级菜单的样式也只是在本来的样式上进行修改, 加上子分类的样式.
打印首页菜单项的语句是:
3. 二级菜单的效果全部使用 JavaScript 实现, 为便于理解, 使用面向对象方式编写代码, 借鉴了部分 Prototype 框架的代码. 因为代码比较多, 不适合逐句解说, 所以我已标上了大量注释. 代码不是很复杂, 有 JS 基础的话应该不会存在障碍.另外为了迎合个别人的口味, 加上透明效果. Enjoy!
探究JavaScript函数式编程的乐趣 编程范式编程范式是一个由思考问题以及实现问题愿景的工具组成的框架。很多现代语言都是聚范式（或者说多重范式）：他们支持很多不同的编程范
javascript实现网页端解压并查看zip文件 WEB前端解压ZIP压缩包web前端解压zip文件有什么用：只考虑标准浏览器的话，服务器只要传输压缩包到客户端，节约了带宽，而且节约了传输时间，听起
js编写“贪吃蛇”的小游戏 贪吃蛇儿时的回忆，今天刚好学习到这了，就刚好做了一个，也是学习了吧，需要掌握的知识：1、JS函数的熟练掌握，2、JS数组的应用，3、JS小部分AJAX
标签: 用js实现类的方法
本文链接地址:https://www.jiuchutong.com/biancheng/387124.html 转载请保留说明！上一篇：JS实现DIV容器赋值的方法(js中如何在div里写入内容)
