WordPress用JavaScript和CSS实现二级菜单展开手风琴效果
2021-04-20 00:30
阅读：425
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实现二级菜单展开手风琴效果
文章链接：http://soscw.com/index.php/essay/76893.html
文章标题：WordPress用JavaScript和CSS实现二级菜单展开手风琴效果
文章链接：http://soscw.com/index.php/essay/76893.html
评论
亲，登录后才可以留言！