javascript - 启动自己的网站时如何隐藏切换侧边栏？

Question

我为我的菜单创建了一个带有切换侧边栏的站点，但是每次加载站点时都会显示切换侧边栏内的按钮，而无需用户单击切换侧边栏按钮。请指导我解决此问题的方法，谢谢。

标签： javascriptjqueryhtmlcss

Answer 1

这是一个使用 html、css 和 5 行 javascript 的非常简单的示例：

window.addEventListener('DOMContentLoaded', (event) => {
  const button = document.querySelector('button');

  button.addEventListener('click', _ => {
    document.getElementById('sidebar').classList.toggle('collapsed');
  });
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#sidebar, #content {
  height: 100%;
  overflow:auto;
  float:left;
  transition: width .35s;
}

#sidebar {
  background:white;
  width: 30%;
  box-shadow: 2px 0 4px rgba(0,0,0,0.5);
}

#sidebar.collapsed {
  width: 0;
}

#sidebar.collapsed + #content {
  width: 100%;
}

#content {
  background:gray;
  width: 70%;
}

button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border:none;
  outline:none;
  background: black;
  margin: 20px;
  cursor:pointer;
}

h3 {
  font-family: sans-serif;
  color:white;
  text-align:center;
}

<div id="sidebar" class="collapsed">
  
</div>
<div id="content">
  <button title="Toggle sidebar"></button>
  <h3>Some content</p>
</div>