导航菜单含有子菜单时图标切换的处理

概述导航中的菜单有子菜单，并且有一个文件夹的图标，当点击这个子项的时候，他的子目录会打开，并且图标为原来的文件夹图标切换成文件夹打开状态的图标。

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

本站在重写移动端左侧菜单功能时，导航中的菜单有子菜单，并且有一个文件夹的图标，当点击这个子项的时候，他的子目录会打开，并且图标为原来的文件夹图标切换成文件夹打开状态的图标。刚开始一时卡住不知如何写，过了会终于找到了思路，感觉挺好！

上效果图

实现方法

wordpress 导航菜单中，如果含有子菜单的，那这个 li 的 class 里都含有一个：.menu-item-has-children 的样式，当点击项目时，执行以下代码：

//默认子项隐藏：

$('.mobile-menu-wrap .menu-item-has-children a').next().hIDe();

 

//点击时执行：

$('.mobile-menu-wrap .menu-item-has-children a').click(function(){

$(this).toggleClass('menu-item-open').next().slIDetoggle();

})

有了 menu-item-open 这个样式后，就可以处理打开与未打开图标的切换了

//默认未打开子菜单时的文件夹图标：

.mobile-menu-wrap .menu-item-has-children>a:before {

content:"f114";

Font-family: FontAwesome;

display: inline-block;

margin-right: 10px;

color: #666;

Transition:all 0.5s;

}

 

//打开子菜单时切换图标：

.mobile-menu-wrap .menu-item-open:before {

content:"f115"!important;

}

这样就能做到效果图的效果了，一时思路卡住就休息休息，过会或许就有解决的办法了。

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的导航菜单含有子菜单时图标切换的处理全部内容，希望文章能够帮你解决导航菜单含有子菜单时图标切换的处理所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。