JQuery - 切换父级后无法在另一个对象上添加过渡

Question

我已经潜伏这个网站几年了，但最近才决定真正尝试扩大我的前端视野，并且认为现在可能是注册的好时机。

我对 HTML 和 CSS 比较熟悉，但我现在才开始深入研究 JS。我编写了这个简单的小滑出小部件，虽然前半部分工作正常(打开和关闭抽屉的过程)，但第二部分(您单击球并放大)却无法工作。我确信可能有一个非常简单的解决方案，或者解释为什么我的方法是错误的，但我似乎无法弄清楚。任何帮助，将不胜感激。

这是 JQuery:

$(function(){
 var box = $('#box');
 var drawer = $('#drawer');
 var ball = $('.ball');

 box.click(function(){
 drawer.toggleClass("open");
 });
 ball.click(function(){
 ball.toggleClass("ball-lg");
 });
});

Link to the codepen.

Answer 1

您想要从 #drawer 中删除负 z-index。负 z 索引会将元素放置在具有静态位置和/或更高 z 索引的所有默认元素下方/后面，因此除非已显式定义 body 的 z 索引小于-1，该元素将不可点击。

这是一个例子

a {
  position: relative;
  z-index: -1;
}

<a href="#">click me</a>