WordPress用JavaScript和CSS实现二级菜单展开手风琴效果
Posted MrAit
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WordPress用JavaScript和CSS实现二级菜单展开手风琴效果相关的知识,希望对你有一定的参考价值。
[wordpress中有很多插件来实现二级菜单,比如wordpress插件 : 利用Max Mega Menu实现二级菜单的伸缩,不过,如果要简单地实现二级菜单展开手风琴效果,可以用下面的代码,不过得自己定位到一级菜单,定位方法如下:
我们可以用menu-item-has-children定位到有二级菜单的菜单栏。
WordPress用javascript和CSS实现二级菜单展开手风琴效果
Javascript具体代码如下:
$(document).ready(function(){ $(".doc-sidebar li.menu-item-has-children a:eq(0)").show(); $(".doc-sidebar li.menu-item-has-children a").click(function(){ $(this).addClass("current").next("ul.sub-menu").slideToggle(300).siblings("ul.sub-menu").slideUp("slow"); $(this).siblings().removeClass("current"); $(this).get(0).parentNode.style.background="#f1f1f1 center right no-repeat"; }); });
?
Css具体代码如下:
.doc-sidebar ul ul.sub-menu{display:none;} .doc-sidebar li.menu-item-has-children{ background:#f1f1f1 url(https://cdn.breakyizhan.com/wp-content/uploads/2018/07/pro_left.png) center right no-repeat; padding-right:22px; }
以上是关于WordPress用JavaScript和CSS实现二级菜单展开手风琴效果的主要内容,如果未能解决你的问题,请参考以下文章
如何将自己的 javascript/css 文件添加到 wordpress 插件菜单页面?
wordpress页面自定义字段css/javascript
PHP wordpress自定义字段css / javascript for pages
javascript Wordpress - 使用addClass + CSS将div滚动到某个位置
javascript Divi | WordPress主题|移动菜单可折叠子菜单通过Toggles | CSS和jQuery调整在行动:https://i.gyazo.com/93557e9ef5d4