Wordpress 下拉菜单

Question

我尝试在我的 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();

});

谁能帮我写代码？ 会非常好。非常感谢！

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

Answer 1

那是因为你使用的 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');
        
     });
});

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

DEMO