zoukankan      html  css  js  c++  java
  • WordPress用JavaScript和CSS实现二级菜单展开手风琴效果

    [

    wordpress中有很多插件来实现二级菜单,比如wordpress插件 : 利用Max Mega Menu实现二级菜单的伸缩,不过,如果要简单地实现二级菜单展开手风琴效果,可以用下面的代码,不过得自己定位到一级菜单,定位方法如下:

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

    我们可以用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
  • 相关阅读:
    随机数
    质数
    猜数
    失败
    判断质数
    2019.7.21记录
    9*9乘法表
    小人
    奔跑的字母

  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13287210.html
Copyright © 2011-2022 走看看