JavaScript 滑动面板，如何使按钮可用？
[英]JavaScript slide panel, how to make button usable?
问题描述
我正在尝试制作一个滑动面板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 -->
当我单击触发按钮时，我想在控制台中看到“此处”登录，我尝试添加一个 cursor:pointer in.trigger，但效果不佳。
1 个解决方案
解决方案1
3 已采纳 2020-06-14 04:46:47
.cd-panel__container中的问题不应该是 postition 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传递按钮值并使其在xwiki宏中可用
[英]Pass Button Value using javascript and make it usable in xwiki macro
如何制作左右面板，以及如何在它们之间滑动分隔板？
[英]How to make a left and right panel, and be able to slide a divider between them?
如何使我的npm typescript模块在简单的Javascript项目中可用？
[英]How to make my npm typescript module usable in simple Javascript project?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.