两个菜单之间的转换和隐藏/忽略二级菜单的可点击性

Posted 2023-02-24

【中文标题】两个菜单之间的转换和隐藏/忽略二级菜单的可点击性

【英文标题】：Transition between two menu's and hide/ignore clickability of the secondary menu

【发布时间】：2015-07-16 12:07:09

【问题描述】：

我有两个相互重叠的菜单，它们根据特定锚点的点击在彼此之间进行转换。我们称它们为.defaultMenu 和.secondMenu，锚点是.showSecondMenu，要返回，您必须单击.hideSecondMenu。它们之间的过渡包括不透明动画。通常我使用display: none 来忽略“隐藏”菜单的点击，但这次display: none 不是一个选项。

我已经找到了使用pointer-event: none 的a topic，但这不适用于IE9/10。因此，我正在寻找一种简单的方法在两个相互重叠的菜单之间进行转换，但只有活动菜单项是可点击的。

整个想法是，当菜单从.defaultMenu 转换到.secondMenu（和向后）时，活动菜单会淡出，而新的隐藏菜单会淡入。

如前所述，它应该与 IE9/10 兼容。

【问题讨论】：

请分享一些相关代码，我们可以更好地帮助您。如果可能，发布 JSFiddle 链接。

【参考方案1】：

哇，我几乎要为此给自己一个-1。显然，有一种非常简单的方法可以实现这一点。 .fade().

$('a.showSecondMenu').click(function(event) 
  event.preventDefault();
  $('.defaultMenu').fadeOut();
  $('.secondMenu').fadeIn();
);

并反转此脚本以隐藏第二个菜单并显示默认菜单。