码迷,mamicode.com
首页 > 编程语言 > 详细

WordPress用JavaScript和CSS实现二级菜单展开手风琴效果

时间:2020-07-12 10:40:27      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:add   实现   upload   效果   slide   menu   not   class   his   

[

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;
}

]
转载请保留页面地址:https://www.breakyizhan.com/wpress/4937.html

WordPress用JavaScript和CSS实现二级菜单展开手风琴效果

标签:add   实现   upload   效果   slide   menu   not   class   his   

原文地址:https://www.cnblogs.com/breakyizhan/p/13287210.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!