将父元素设置为溢出隐藏以切断动画，但保持显示子元素

Question

我有两个菜单，您可以使用开关在它们之间切换。每个菜单项都有一个下拉列表，当您单击菜单项时会显示该下拉列表。

问题是，当单击开关时，会为两个菜单(滑入和滑出(之间的转换显示动画。我想只在菜单元素中保留滑动动画，所以我使用了overflow-y: hidden;来实现这一点。然而，这也切断了我的下拉菜单，因为它们是具有overflow: hidden的父菜单的子菜单。

我制作了一个代码笔来显示这里的问题：

https://codepen.io/twan2020/pen/jOMMoom

切换菜单时，可以看到动画溢出菜单容器。

如果我使用下面的代码，动画看起来很好，但单击项目时菜单不会再打开。

.categoriemenu .categorielijst {
width: 100%;
margin-bottom: 0px;
display: flex;
justify-content: space-evenly;
position: relative;
overflow-y: hidden;
}

我该怎么解决这个问题？

我尝试将product-menu(下拉菜单的类(设置为position:fixed，但这破坏了样式，我的菜单也有可变高度，所以我想知道是否有更简单的解决方案？

Answer 1

我通过在overflow-hidden上为动画的持续时间设置计时器来修复它，如下所示：

$('.toggle-switch input').on('change', function() {
if ($('input[name=switch]:checked', '.toggle-switch').val() == 1) {
$(".categorielijst").css('overflow-y', 'hidden');
$("#menu1").addClass('animate__slideInUp');
$("#menu2").addClass('animate__slideOutUp');
$("#menu1").css('display', 'flex');
$("#menu1").removeClass('animate__slideOutDown');
$("#menu2").removeClass('animate__slideInDown');
setTimeout(function() {
$(".categorielijst").css('overflow-y', 'visible');
}, 600)
} else if ($('input[name=switch]:checked', '.toggle-switch').val() == 2) {
$(".categorielijst").css('overflow-y', 'hidden');
$("#menu1").css('position', 'absolute')
$("#menu1").addClass('animate__slideOutDown');
$("#menu2").addClass('animate__slideInDown');
$("#menu2").css('display', 'flex');
$("#menu1").removeClass('animate__slideInDown');
$("#menu2").removeClass('animate__slideOutUp');
setTimeout(function() {
$(".categorielijst").css('overflow-y', 'visible');
}, 600);
}
});

这并不完美，因为如果你用垃圾邮件点击切换，它有时仍然会出现故障并溢出容器，但如果你像普通人一样点击，它会很好。