DEMO

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

});

任何人都可以帮我处理我的代码吗？会很好的。非常感谢你！

EDIT :: 嗨，我现在遇到问题，当我有一个以上的下拉菜单，我点击一个，其他所有打开。你能帮我解决这个问题吗？这个对象会滑下来吗？

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');

     });
});

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

Wordpress向下滑动菜单

1 个答案:

DEMO