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

Question

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

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

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

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

Answer 1

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

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

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