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

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

 

在写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;

}

 

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。如有需求,建议购买正版!如果源码侵犯了您的利益请留言告知!!
811轩轩资源 » WordPress移动端左侧菜单含有子菜单图标切换处理

发表评论