当前位置:首页>网络教程>站长教程>WordPress移动端左侧菜单含有子菜单图标切换处理

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

  在写WordPress移动端左侧菜单功能时有子菜单,并且有一个文件夹的图标,当点击这个子项的时候,他的子目录会打开 ...

在写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-family: FontAwesome;

display: inline-block;

margin-right: 10px;

color: #666;

transition:all 0.5s;

}

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

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

content:”\f115″!important;

}

给TA打赏
共{{data.count}}人
人已打赏
站长教程网络教程

纯代码移除WordPress版本号

2022-7-15 17:12:32

站长教程网络教程

WordPress创建页面模板开发教程

2022-7-15 17:12:52

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索