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

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

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

继续写WordPress桌面端编辑按钮功能时有功能菜单,需要有文件包的工具栏,当点击这个项目类别的时候他,妻子的工作目录会打开,并且图标为现在的电脑快捷方式切换成文件夹打开激活状态图标。今天讲讲WordPress移动端左侧菜单含有子菜单图标切换处理。

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

实现方法

wordpre洛克视频菜单中,如果含有子菜单的,其实这一个tl的class里里面都有一个:.menu-item-has-childrelie的样式,当点击时我们,执行以下代码:

//默认子项隐藏:

$('.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();

})

有i了enu-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://www.7zt.cn/2843.html
文章标题:WordPress移动端左侧菜单含有子菜单图标切换处理
文章版权:柒主题 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!
本文最后更新发布于2022年11月20日 14时35分36秒,某些文章具有时效性,若有错误或已失效,请在下方留言或联系:21660010@qq.com
声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 柒主题 或点击右侧 私信:站长 反馈,我们将尽快处理。

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