2

我正在尝试制作一个幻灯片面板，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 -->

当我单击触发按钮时，我想在控制台中看到“此处”登录，我尝试在 .trigger 中添加一个光标：指针，但效果不佳。

4

1 回答 1

3

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

.cd-panel__container具有特定的widthand height，当您将其position设为 asfixed时，它将覆盖其背后的元素。

所以你只需要修改class.cd-panel__container的positionstatic 

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>

于 2020-06-14T04:46:47.600 回答