如何使navbar在点击按钮时增长和收缩

Question

我有一个简单的HTML和scss的navbar，我想使它以一种方式，它可以折叠，例如，我将有一个小按钮在navbar的侧面，当点击时，条增长显示元素（图标和标题），当再次点击时navbar收缩显示只有图标，我如何实现这样的东西？

null

.page-container {
  display: flex;
  height: 100%;
  background: white;
}

.sidebar {
  height: 100%;
  width: 300px;
  background: rgba(0, 0, 0, 0.8);
}

.list-items {
  padding-top: 100px;
}

.list-item {
  display: flex;
  font-size: 20px;
  color: white;
  padding: 10px 20px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  position: relative;
}

.list-item.selected {
  color: white;
}

.list-item:hover {
  color: #51bbe5;
}

.list-item:hover::before {
  opacity: 0.35;
  transform: scaleY(0.5) scaleX(2);
}

.list-item::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 3px;
  top: 0;
  left: 0;
  background-color: #51bbe5;
  /* set opacity to 0 by default */
  opacity: 0;
  transform: scaleY(0);
  transition: transform 0.2s, opacity 0.2s;
}

.list-item.selected::before {
  opacity: 1;
  transform: scaleY(1);
}

.list-item span.material-icons-outlined {
  margin-right: 12px;
}

.page-content-container {
  padding: 50px;
}

<div class="page-container">
  <div class="sidebar">
    <div class="list-items">
      <a class="list-item">
        <span class="material-icons-outlined"> source </span>New reconciliation
      </a>
      <a class="list-item">
        <span class="material-icons-outlined"> source </span>Reports history
      </a>
      <a class="list-item">
        <span class="material-icons-outlined"> drive_folder_upload </span
        >Uploaded files history
      </a>
      <a routerLink="/reports" routerLinkActive="selected" class="list-item">
        <span class="material-icons-outlined"> description </span>Logout
      </a>
    </div>
  </div>
  <div class="page-content-container">
  </div>
</div>

null

Answer 1

1.创建一个按钮，单击该按钮可以执行此“显示隐藏”操作，

单击按钮时,检查菜单是否可见,然后隐藏,如果隐藏,然后显示,

最初，我将它隐藏起来，您可以只通过css来反转它，不需要修改jQuery代码，它的编写方式是这样的，它在最初隐藏或可见时都能工作

如果需要其他东西，请随意评论

null

$(document).ready(function(){
  $('button').click(function(){
  if($(this).next().is(':visible')) {
      $(this).next().slideUp();
      $('.show').show();
      $('.hide').hide();
  }else {
    $(this).next().slideDown();
    $('.show').hide();
    $('.hide').show();
  }
  });
});

.page-container {
  display: flex;
  height: 100%;
  background: white;
}

.sidebar {
  height: 100%;
  width: 300px;
  background: rgba(0, 0, 0, 0.8);
}

.list-items {
  padding-top: 100px;
  display: none;
}

.list-item {
  display: flex;
  font-size: 20px;
  color: white;
  padding: 10px 20px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  position: relative;
}

.list-item.selected {
  color: white;
}

.list-item:hover {
  color: #51bbe5;
}

.list-item:hover::before {
  opacity: 0.35;
  transform: scaleY(0.5) scaleX(2);
}

.list-item::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 3px;
  top: 0;
  left: 0;
  background-color: #51bbe5;
  /* set opacity to 0 by default */
  opacity: 0;
  transform: scaleY(0);
  transition: transform 0.2s, opacity 0.2s;
}

.list-item.selected::before {
  opacity: 1;
  transform: scaleY(1);
}

.list-item span.material-icons-outlined {
  margin-right: 12px;
}

.page-content-container {
  padding: 50px;
}

.showHide .hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container">
  <div class="sidebar">
  <button class="showHide"><span class="show">Show + </span><span class="hide">hide - </span></button>  
    <div class="list-items">
      <a class="list-item">
        <span class="material-icons-outlined"> source </span>New reconciliation
      </a>
      <a class="list-item">
        <span class="material-icons-outlined"> source </span>Reports history
      </a>
      <a class="list-item">
        <span class="material-icons-outlined"> drive_folder_upload </span
        >Uploaded files history
      </a>
      <a routerLink="/reports" routerLinkActive="selected" class="list-item">
        <span class="material-icons-outlined"> description </span>Logout
      </a>
    </div>
  </div>
  <div class="page-content-container">
  </div>
</div>