在小型设备中显示和隐藏边栏按钮的javaScript

就像我的标题所说的那样，我试图在小屏幕中显示和隐藏"旁白"。下面是代码，但它不工作

我想相信，我在这里努力实现的目标并没有那么复杂。我只需要帮助实现它并学习更多

const sidebar = document.querySelector('aside');
const showSidebarBtn = document.querySelector('#show__sidebar-btn');
const hideSidebarBtn = document.querySelector('#hide__sidebar-btn');

const showSidebar = () => {
sidebar.style.right = '0';
showSidebarBtn.style.display = 'none';
hideSidebarBtn.style.display = 'inline-block';   
}

const hideSidebar = () => {
sidebar.style.right = '100%';
showSidebarBtn.style.display = 'inline-block';
hideSidebarBtn.style.display = 'none';   
}

showSidebarBtn.addEventListener('click', showSidebar)
hideSidebarBtn.addEventListener('click', hideSidebar)

.dashboard aside {
position: fixed;
box-shadow: 2rem 0 4rem rgba(0, 0, 0, 0.4);
left: -100%;
height: 100vh;
transition: var(--transition);
background: var(--color-bg);
}

----------------------------------------
#hide__sidebar-btn {
display: none;
}

<div class="container dashboard__container">
<button id="show__sidebar-btn" class="sidebar__toggle"><i class="uil uil-angle-right"></i>
</button>
<button id="hide__sidebar-btn" class="sidebar__toggle"><i class="uil uil-angle-left"></i>
</button>
<aside>
<ul>
<li>
<a href="add-post.html"><i class="uil uil-edit-alt"></i>
<h5>Add Post</h5>
</a>
</li>
<li>
<a href="manage-posts.html"><i class="uil uil-edit"></i>
<h5>Manage Posts</h5>
</a>
</li>
</ul>
</aside>

样式中的类.dashboard不在html代码中。

为了运行下面的代码，我将背景：var(--color-bg(改为黄色。

如果希望<aside>始终显示在较大的浏览器视图中，css中的第二部分是可选的。

我确实使用了(在JS和CSS中(left:0%和left:100%，而不是正确的属性。

const sidebar = document.querySelector('aside');
const showSidebarBtn = document.querySelector('#show__sidebar-btn');
const hideSidebarBtn = document.querySelector('#hide__sidebar-btn');
const showSidebar = () => {
sidebar.style.left = '0';
showSidebarBtn.style.display = 'none';
hideSidebarBtn.style.display = 'inline-block';   
}
const hideSidebar = () => {
sidebar.style.left = '-100%';
showSidebarBtn.style.display = 'inline-block';
hideSidebarBtn.style.display = 'none';   
}
showSidebarBtn.addEventListener('click', showSidebar)
hideSidebarBtn.addEventListener('click', hideSidebar)

.dashboard__container aside {
position: fixed;
box-shadow: 2rem 0 4rem rgba(0, 0, 0, 0.4);
left: -100%;
width: 100%;
height: 100vh;
transition: var(--transition);
background: yellow;
}
#hide__sidebar-btn {
display: none;
}
/* if you want to show always on larger browser view */
@media (min-width: 768px) {
.dashboard__container button {
display: none !important;
}
.dashboard__container aside {
left: 0% !important;
}
}

<div class="container dashboard__container">
<button id="show__sidebar-btn" class="sidebar__toggle"><i class="uil uil-angle-right"></i>Show</button>
<button id="hide__sidebar-btn" class="sidebar__toggle"><i class="uil uil-angle-left"></i>Hide</button>
<aside>
<ul>
<li>
<a href="add-post.html"><i class="uil uil-edit-alt"></i>
<h5>Add Post</h5>
</a>
</li>
<li>
<a href="manage-posts.html"><i class="uil uil-edit"></i>
<h5>Manage Posts</h5>
</a>
</li>
</ul>
</aside>
</div>

相关内容

最新更新

热门标签：