通过按钮/图标激活垂直可扩展菜单

Question

我有点新手，而且我试图制作left menu like this.

我需要按一个按钮，让菜单展开，地图的div调整宽度

＆＃13;

＆＃13;

#sidebar {
  background-color: #16a085;
  color: white;
  height: 100%;
  padding: 0;
  position: fixed;
  left: 0;
  top: 0;
  width: 50px;
  z-index: 2;
}
#sidebar .link-text {
  visibility: hidden;
}
#sidebar:hover .link-text {
  visibility: visible;
}
#sidebar:hover {
  width: 200px;
}
#sidebar a {
  color: white;
  white-space: nowrap;
  overflow: hidden;
}
#sidebar-nav {
  text-align: left;
  font-size: 30px;
  margin-top: 75px;
}

＆＃13;

<!-- Sidebar -->
<div id="sidebar" role="navigation">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-
  target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

  <div id="sidebar-nav">
    <ul class="nav nav-stacked">
      <li><a href="http://stackoverflow.com/"> <span class="glyphicon glyphicon-star"></span>Link1</a></li>
      <li><a href="http://stackoverflow.com/"> <span class="glyphicon glyphicon-cloud"></span>Link2</a></li>
      <li><a href="http://stackoverflow.com/"> <span class="glyphicon glyphicon-fire"></span>Link3</a></li>
      <li><a href="http://stackoverflow.com/"> <span class="glyphicon glyphicon-heart"></span>Link4</a></li>
      <li><a href="http://stackoverflow.com/"> <span class="glyphicon glyphicon-send"></span>Link5</a></li>
    </ul>
  </div>
  <!-- Sidebar End -->
</div>

＆＃13;

＆＃13;

＆＃13;         

到目前为止我已经尝试了这个但是我不知道如何隐藏菜单并放置一个按钮/图标来绑定动作以扩展

Answer 1

使用按钮切换侧边栏的方法之一可能是在其上添加/删除CSS类。我将类命名为expanded，其CSS应如下所示 - 这意味着让类expanded等同于将其悬停的行为。

#sidebar:hover,
#sidebar.expanded{
  width: 200px;
}

接下来，您可以在按钮上添加单击事件侦听器，该按钮会在侧边栏上添加expanded类（如果它尚未存在），否则将其删除。像这样：

if(sidebar.classList.contains("expanded")) {
    sidebar.classList.remove('expanded'); 
} else {
    sidebar.classList.add('expanded');
}

＆＃13;

＆＃13;

var toggleButton = document.getElementById('toggleButton');
toggleButton.addEventListener('click', function(event) {
  var sidebar = document.getElementById('sidebar');
  
  if(sidebar.classList.contains("expanded")) {
    sidebar.classList.remove('expanded'); 
  } else {
    sidebar.classList.add('expanded');
  }
});

＆＃13;

#sidebar {
  background-color: #16a085;
  color: white;
  height: 100%;
  padding: 0;
  position: fixed;
  left: 0;
  top: 0;
  width: 50px;
  z-index: 2;
}
#sidebar .link-text {
  visibility: hidden;
}
#sidebar:hover .link-text {
  visibility: visible;
}
#sidebar:hover,
#sidebar.expanded{
  width: 200px;
}
#sidebar a {
  color: white;
  white-space: nowrap;
  overflow: hidden;
}
#sidebar-nav {
  text-align: left;
  font-size: 30px;
  margin-top: 75px;
}

＆＃13;

<!-- Sidebar -->
<div id="sidebar" role="navigation">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-
  target=".navbar-collapse">
    <span id="toggleButton" class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

  <div id="sidebar-nav">
    <ul class="nav nav-stacked">
      <li><a href="http://stackoverflow.com/"> <span class="glyphicon glyphicon-star"></span>Link1</a></li>
      <li><a href="http://stackoverflow.com/"> <span class="glyphicon glyphicon-cloud"></span>Link2</a></li>
      <li><a href="http://stackoverflow.com/"> <span class="glyphicon glyphicon-fire"></span>Link3</a></li>
      <li><a href="http://stackoverflow.com/"> <span class="glyphicon glyphicon-heart"></span>Link4</a></li>
      <li><a href="http://stackoverflow.com/"> <span class="glyphicon glyphicon-send"></span>Link5</a></li>
    </ul>
  </div>
  <!-- Sidebar End -->
</div>

＆＃13;

＆＃13;

＆＃13;