[英]Drop down only one menu at a time
So far I have this drop-down menu . 到目前为止,我有这个下拉菜单 。 When I click on either "Menu", "Menu1" or "Menu2", the links under it will drop down. 当我单击“菜单”,“菜单1”或“菜单2”时,其下的链接将下拉。
The problem: I need to display only one drop-down at a time, so that the user can switch between them. 问题:我一次只需要显示一个下拉菜单,以便用户可以在它们之间切换。
I tried to apply css('overflow', 'hidden');
我试图应用css('overflow', 'hidden');
to the menu currently dropped down, but it won't work, since the overflow: visible !important;
到当前下拉菜单,但由于overflow: visible !important;
而无法正常工作overflow: visible !important;
is applied to the .clicked
class. 应用于.clicked
类。 Please help, anything will be highly appreciated! 请帮助,任何事情将不胜感激!
Try when you click on a element remove class clicked
from all elements and add class clicked
to the element that is clicked 尝试单击元素时,从所有元素中删除class clicked
,然后将class clicked
的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);
});
UPDATE 更新
If you want also on second click menu to be closed try checking if clicked item has already class clicked
: 如果您也想关闭第二个单击菜单,请尝试检查被单击的项目是否已经被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);
});
You also might want to close the links 您可能还想关闭链接
$("#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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.