首页 > 技术 > cms教程

WordPress移动端左侧菜单含有子菜单图标切换处理

cms教程 2022-10-26 09:23:27  

在写wordpress移动端左侧菜单功能时有子菜单,并且有一个文件夹的图标,当点击这个子项的时候,他的子目录会打开,并且图标为原来的文件夹图标切换成文件夹打开状态的图标。今天讲讲WordPress移动端左侧菜单含有子菜单图标切换处理。
WordPress移动端左侧菜单含有子菜单图标切换处理 (https://www.wpzt.net/) WordPress开发教程 第1张
实现方法

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;

}

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://chcsas.com/ywkf/3447.html

加载中~

木星教程网

统计代码 | 湘ICP备19012813号-5

本网站LOGO受版权及商标保护,版权登记号:国作登字-2022-F-10126915,未经湖南木星科技官方许可,严禁使用。
Copyright © 2012-2022 湖南木星科技有限公司(木星网)版权所有
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源,商业媒体及纸媒请先联系:aishangyiwan@126.com

扫描微信二维码

关注我们可获取更多热点资讯