一次只能下拉一个菜单

到目前为止，我有这个drop-down menu。当我点击“菜单”，“菜单1”或“菜单2”时，它下面的链接将会下降。一次只能下拉一个菜单

问题：我需要一次仅显示一个下拉列表，以便用户可以在它们之间切换。

我试图将css('overflow', 'hidden');应用于当前下拉的菜单，但它不起作用，因为overflow: visible !important;应用于.clicked类。请帮忙，任何事情将不胜感激！

2014-04-25 Marek

你可以使用jQuery实现这一目标。这是一个解决方案 - http://stackoverflow.com/questions/23270323/click-to-expand-shall-result-in-collapsing-other-opened-items – Orahmax

我无法及时帮助您的HTML是真的很难阅读。你真的需要这么多吗？ o_O' – Apolo

@Apolo你仍然有机会:)菜单应该在第二次点击时关闭，所以恐怕我需要坚持toggleClass。是的，标记必须保持不变。 – Marek

尝试当你点击一个元素上的所有元素删除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

来源

2014-04-25 11:09:24 laaposto

它修复了部分，但我需要菜单也关闭第二次点击。 – Marek

已解决，将其标记为可以回答。非常感谢！ – Marek

您还可能要关闭链接

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

来源

2014-04-25 11:14:52

一次只能下拉一个菜单

回答

相关问题