JavaScript 滑动面板，如何让按钮可用？

Question

我正在尝试制作一个滑动面板，https://codyhouse.co/gem/css-slide-in-panel。当我运行以下代码时，我无法点击我的底部。有人可以帮忙修复它吗？

const panel = document.querySelector('.cd-panel'); 
var ind = true; 
const tr = document.querySelector('.trigger'); 

btn.addEventListener('click', ()=>{
  if(ind){
    ind = false; 
    panel.classList.add('cd-panel--is-visible'); 
  }else{
    ind = true; 
    panel.classList.remove('cd-panel--is-visible'); 
  }
});

tr.addEventListener('click', ()=>{
  console.log('here'); 
});

.cd-panel {
  /*...*/
  visibility: hidden;
  transition: visibility 0s 0.6s;
}

.cd-panel.cd-panel--is-visible {
  visibility: visible;
  transition: visibility 0s 0s;
}

.cd-panel__header {
  /*...*/
  position: fixed;
  top: 0;
  width: 90%;
  height: 50px;
  transition: transform 0.3s 0s;
  transform: translateY(-50px);
}

.cd-panel--from-right .cd-panel__header {
  right: 0;
}

.cd-panel--from-left .cd-panel__header {
  left: 0;
}

.cd-panel--is-visible .cd-panel__header {
  transition: transform 0.3s 0.3s;
  transform: translateY(0px);
}

.cd-panel__container {
  /*...*/
  position: fixed;
  width: 90%;
  height: 100%;
  top: 0;
  transition: transform 0.3s 0.3s;
}

.cd-panel--from-right .cd-panel__container {
  right: 0;
  transform: translate3d(100%, 0, 0);
}

.cd-panel--from-left .cd-panel__container {
  left: 0;
  transform: translate3d(-100%, 0, 0);
}

.cd-panel--is-visible .cd-panel__container {
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

<button id='btn'>BTN</button>
<main class="cd-main-content">
   <!-- your main content here -->
</main>

<div class="cd-panel cd-panel--from-right js-cd-panel-main">
   <header class="cd-panel__header">
      <h1>Title Goes Here</h1>
      <button class='trigger'>Trigger</button>
  </header>

   <div class="cd-panel__container">
      <div class="cd-panel__content">
         <!-- your side panel content here -->
      </div> <!-- cd-panel__content -->
   </div> <!-- cd-panel__container -->
</div> <!-- cd-panel -->

我希望在单击触发按钮时看到 'here' 登录到控制台，我尝试在 .trigger 中添加光标：指针，但效果不佳。

Answer 1

.cd-panel__container的问题不应该是postition:fixed

.cd-panel__container 有特定的 width 和 height，当你把它 position 设为 fixed 时，它会覆盖它后面的元素。

所以只需要修改class.cd-panel__container的position为static

const panel = document.querySelector('.cd-panel'); 
var ind = true; 
const tr = document.querySelector('.trigger'); 
const btn = document.querySelector('#btn'); 


btn.addEventListener('click', ()=>{
  if(ind){
    ind = false; 
    panel.classList.add('cd-panel--is-visible'); 
  }else{
    ind = true; 
    panel.classList.remove('cd-panel--is-visible'); 
  }
});

tr.addEventListener('click', ()=>{
  console.log('here'); 
});

    .cd-panel {
  /*...*/
  visibility: hidden;
  transition: visibility 0s 0.6s;
}

.cd-panel.cd-panel--is-visible {
  visibility: visible;
  transition: visibility 0s 0s;
}

.cd-panel__header {
  /*...*/
  position: fixed;
  top: 0;
  width: 90%;
  height: 50px;
  transition: transform 0.3s 0s;
  transform: translateY(-50px);
}

.cd-panel--from-right .cd-panel__header {
  right: 0;
}

.cd-panel--from-left .cd-panel__header {
  left: 0;
}

.cd-panel--is-visible .cd-panel__header {
  transition: transform 0.3s 0.3s;
  transform: translateY(0px);
}

.cd-panel__container {
  /*...*/
 /* position: fixed;*/
  width: 90%;
  height: 100%;
  top: 0;
  transition: transform 0.3s 0.3s;
}

.cd-panel--from-right .cd-panel__container {
  right: 0;
  transform: translate3d(100%, 0, 0);
}

.cd-panel--from-left .cd-panel__container {
  left: 0;
  transform: translate3d(-100%, 0, 0);
}

.cd-panel--is-visible .cd-panel__container {
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head>
<body>
<button id='btn'>BTN</button>
<main class="cd-main-content">
   <!-- your main content here -->
</main>

<div class="cd-panel cd-panel--from-right js-cd-panel-main">
   <header class="cd-panel__header">
      <h1>Title Goes Here</h1>
      <button class='trigger'>Trigger</button>
  </header>

   <div class="cd-panel__container">
      <div class="cd-panel__content">
         <!-- your side panel content here -->
      </div> <!-- cd-panel__content -->
   </div> <!-- cd-panel__container -->
</div> <!-- cd-panel -->

    <script src="index.js"></script> 
</body>
</html>

JavaScript 滑动面板，如何让按钮可用？

JavaScript slide panel, how to make button usable?

javascript

css

slider