Question

我正在尝试在我的Wordpress网站上创建一个手风琴菜单。我知道有插件，但我只想学习如何在没有插件的情况下完成它。但它似乎没有用。

所以，这是我的页面;

http://storyville.jonmarkoff.com/storyvillewp/our-work/branded-commercial/

和我的代码;

$(window).load(function () {
    $("#menu-main-menu").accordion({
        header: "ul.main-nav-menu li"
    });
});

感谢您的帮助！

Answer 1

这应该有帮助...... DEMO

首先：我在你的html div中添加了一个ID。这将使其独一无二。所以，这是更新的HTML：

<div id="navmenu" class="menu-main-menu-container">

这是jQuery：

$(document).ready(function () {
$('#navmenu > ul > li:has(ul)').addClass("has-sub");
$('#navmenu > ul > li > a').click(function () {

    var checkElement = $(this).next();

    $('#navmenu li').removeClass('active');
    $(this).closest('li').addClass('active');

    if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
    }

    if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#navmenu ul ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
    }

    if (checkElement.is('ul')) {
        return false;
    } else {
        return true;
    }
 });
});

然后，您可以使用css根据自己的喜好设置样式：

#navmenu {

}
#navmenu > ul > li:first-child {

}
#navmenu > ul > li:first-child > a {
}

Wordpress手风琴菜单

1 个答案: