javascript - 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();

});

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

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

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