如何制作多个绝对定位的并排滑动面板标签可点击？

Question

以下是我的代码示例。

   <div id="wrapper1" style="width:300px">
     <div id="panel1">
       content
     </div>
     <div id="tab1">
       <a>Tab 1</a>
     </div>
   </div>

   <div id="wrapper2" style="width:200px">
     <div id="panel2">
       content
     </div>
     <div id="tab2">
       <a>Tab 2</a>
     </div>
   </div>

页面加载时面板为display:none;，但选项卡可见。我在选项卡上使用slideToggle（）来打开/关闭面板。
问题是我希望标签在每个包装中心，但在面板折叠时间隔大约10px。但由于两个包装器都是position:absolute;，第二个选项卡位于第一个包装器“下面”，因为第一个包装器的宽度超过了第二个包装器。这显然让我无法点击第二个标签。有谁知道如何点击一个绝对定位的div的透明部分？在第一个包装器上使用pointer-events:none;是行不通的，因为我还需要能够单击其选项卡。

Answer 1

你无法点击div的透明部分;透明与否，顶部的div将收到点击。