同一页面上的两个 Off Canvas 侧边栏 [关闭]答案

【问题标题】：Two Off Canvas sidebar on the same page [closed]同一页面上的两个 Off Canvas 侧边栏 [关闭]
【发布时间】：2020-06-27 22:09:06
【问题描述】：

我是新手，不太擅长 HTML、CSS、JS 和 Bootstrap。但我有一个好主意（我想是这样：P），但我不知道如何实现它。

我的想法是制作一个带有两个 Off-Canvas 侧边栏的页面：

First 侧边栏位于left 一侧，加载页面时默认为opened。
Second 侧边栏位于 right 一侧，加载页面时默认为 hidden。
左侧边栏有一个关闭按钮，点击此按钮后，左侧边栏隐藏，右侧边栏显示。
并且右侧边栏上还有另一个关闭按钮，用于关闭右侧边栏并打开左侧边栏。

谁能帮帮我？

非常感谢您的阅读。

【问题讨论】：

你尝试过什么吗？ HTML/CSS？
嗨@J4R，我在谷歌上搜索了很多，但我不知道如何像我的理想那样修改它。你能帮帮我吗？
您需要创建一个minimal reproducible example 来说明您的尝试，这个问题太宽泛了，没有代表您的努力
@AlonEitan 谢谢你，我会尝试创建其他帖子。
@LongPhạm 据我了解，您有使用 HTML、CSS 和 Bootstrap 创建页面的想法，但您现在不知道该怎么做？简而言之，你应该自己做，或者花钱请人帮你做，我们根本做不到:)。

标签： javascript html css bootstrap-4

【解决方案1】：

有很多方法和可能性来创造你想要的东西。

一种可能的解决方案，可能是这样的：

 document.getElementById('sidebar-left').addEventListener('click', function () {
        this.classList.remove('open');
        document.getElementById('sidebar-right').classList.add('open');
});
    
document.getElementById('sidebar-right').addEventListener('click', function () {
        this.classList.remove('open');
        document.getElementById('sidebar-left').classList.add('open');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page {
  position: relative;
}

.sidebar {
  height: 100vh;
  width: 400px;
  top: 0;
  position: absolute;
  display: none;
}

.sidebar.open {
  display: block;
}

.sidebar.left {
  left: 0;
  background-color: orange;
}

.sidebar.right {
  right: 0;
  background-color: red;
}

.close {
  padding: 10px;
  background-color: yellow;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

<div class="page">
  <div class="left sidebar open" id="sidebar-left">
    <div class="close">close sidebar</div>
    Left Sidebar
  </div>

  <div class="right sidebar" id="sidebar-right">
    <div class="close">close sidebar</div>
    Right Sidebar</div>
</div>

【讨论】：

我可以从这里修改它。非常感谢，@J4R。