一次只下载一个菜单

Question

到目前为止,我有这个下拉菜单.当我点击"菜单","菜单1"或"菜单2"时,它下面的链接将下拉.

问题:我需要一次只显示一个下拉菜单,以便用户可以在它们之间切换.

我试图应用于css('overflow', 'hidden');当前删除的菜单,但它不起作用,因为overflow: visible !important;它应用于.clicked类.请帮助,任何事都将受到高度赞赏!

Answer 1

单击元素class clicked从所有元素中删除并添加class clicked到单击的元素时尝试

$("#product-menu>ul>li").click(function () {
    var hidden = $(this).find('.clicked');
    $("#product-menu>ul>li").removeClass('clicked');
    $(this).addClass('clicked');
    $('.productSubmenu').width(menuWidth);
});

DEMO

UPDATE

如果您还希望关闭第二个单击菜单,请尝试检查已点击的项目是否已经class clicked:

$("#product-menu>ul>li").click(function () {
    var hidden = $(this).find('.clicked');
    if ($(this).hasClass('clicked')) {
        $(this).removeClass('clicked')
    } else {
        $("#product-menu>ul>li").removeClass('clicked');
        $(this).addClass('clicked');

    }
    $('.productSubmenu').width(menuWidth);
});

DEMO2