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

在写WordPress移动端左侧菜单功能时有子菜单，并且有一个文件夹的图标，当点击这个子项的时候，他的子目录会打开，并且图标为原来的文件夹图标切换成文件夹打开状态的图标。今天讲讲WordPress移动端左侧菜单含有子菜单图标切换处理。

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-f**ily: FontAwesome;

display: inline-block;

**rgin-right: 10px;

color: #666;

transition:all 0.5s;

}

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

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

content:”\f115″!important;

}