两个菜单之间的转换和 hide/ignore 二级菜单的可点击性

Question

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

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

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

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

Answer 1

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

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

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

两个菜单之间的转换和 hide/ignore 二级菜单的可点击性

Transition between two menu's and hide/ignore clickability of the secondary menu

jquery

css

anchor

pointer-events