WordPress向下滑动菜单

Wordpress slide down menu

本文关键字：菜单 WordPress      更新时间：2023-09-26

我试图在我的WordPress博客中实现一个jQuery向下滑动菜单。可悲的是，它根本不起作用。当我单击父菜单点时，我将显示子菜单。这是我的 html 代码：

    <ul id="menu-sidebarmenue" class="menu">
    <li id="menu-item-37" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-37"><a href="#">Parentmenu</a>
    <ul class="sub-menu">
    <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="?page_id=13">Submenu 1</a></li>
    </ul>
  </ul>

我的 Css：

ul{
    margin:0;
    padding:0;
    list-style-type: none;
}
li{
    margin:0;
    padding:0;
    list-style-type: none;
}
.menu-item {    
    width: 225px;
    display: inline-block;
    color: black;
    text-decoration: none;
    font-size: 11px;
    font-weight: normal;
    padding: 5px 0;
    cursor: pointer;
    border-top: black dotted 1px;
}
.sub-menu { 
    float: left;
    display: inline-block;
    color: black;
    padding: 10px 0px 15px 5px;
    text-decoration: none;
    font-size: 11px;
    font-weight: normal;
    }

和我的Javascript：

$(document).ready(function() {
    //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
    $('.menu-item-has-children').click(function() {
        //REMOVE THE ON CLASS FROM ALL BUTTONS
        $('.menu-item-has-children').removeClass('on');
        //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
        $('.sub-menu').slideUp('normal');
        //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
        if($(this).next().is(':hidden') == true) {
            //ADD THE ON CLASS TO THE BUTTON
            $(this).addClass('on');
            //OPEN THE SLIDE
            $(this).next().slideDown('normal');
         } 
     });

    /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
    //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
    $('.menu-item-has-children').mouseover(function() {
        $(this).addClass('over');
    //ON MOUSEOUT REMOVE THE OVER CLASS
    }).mouseout(function() {
        $(this).removeClass('over');                                        
    });
    /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

    /********************************************************************************************************************
    CLOSES ALL S ON PAGE LOAD
    ********************************************************************************************************************/   
    $('.sub-menu').hide();
});

谁能帮我写代码？会很好。多谢！

编辑：：嗨，当我有多个下拉菜单并单击一个时，我现在遇到了问题，所有其他菜单也都打开了。你能帮我如何解决这个问题，只是这个对象滑下来吗？

这是因为您使用的 jQuery 引用的是你不使用的 HTML 元素。

在您的 HTML 中，没有类on或off。

此外，您只有一张幻灯片，因此关闭幻灯片的功能无法正常工作。

如果您只想在子菜单上切换.slideDown()和.slideUp()动画，则可以执行以下操作：

$(document).ready(function() {
    $('.sub-menu').hide();
    
    //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
    $('.menu-item-has-children').click(function() {
        $('.sub-menu').slideToggle('normal');
        
     });
});

这适用于简单的滑动动画。看看我在这个演示中的意思：

演示

相关文章：