导航菜单含有子菜单时图标切换的处理
以下代码由PHP站长网 52php.cn收集自互联网现在PHP站长网小编把它分享给大家,仅供参考 本站在重写移动端左侧菜单功能时,导航中的菜单有子菜单,并且有一个文件夹的图标,当点击这个子项的时候,他的子目录会打开,并且图标为原来的文件夹图标切换成文件夹打开状态的图标。刚开始一时卡住不知如何写,过了会终于找到了思路,感觉挺好! 上效果图实现方法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; } 这样就能做到效果图的效果了,一时思路卡住就休息休息,过会或许就有解决的办法了。 以上内容由PHP站长网【52php.cn】收集整理供大家参考研究如果以上内容对您有帮助,欢迎收藏、点赞、推荐、分享。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |