单击按钮时如何使导航栏增大和缩小答案

【问题标题】：How to make navbar grows and shrinks when button is clicked单击按钮时如何使导航栏增大和缩小
【发布时间】：2021-04-28 23:33:01
【问题描述】：

我有一个简单 HTML 和 scss 格式的导航栏元素（图标和标题），当再次点击导航栏缩小只显示图标时，我该如何实现这样的东西？

.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>

【问题讨论】：

您提供的代码似乎不完整。 “小按钮”在哪里？你是用JS触发菜单吗？请阅读how to create a minimal reproducible example。
嘿@disinfor 小按钮只是一个示例来阐明所需的输出，我的想法是我将使用一个按钮而不是像悬停这样的其他东西..;

标签： javascript html css sass

【解决方案1】：

1.创建一个按钮，单击该按钮即可执行此显示隐藏，

单击按钮时，检查菜单是否可见然后隐藏它，如果它隐藏则显示它，
最初我把它隐藏了，你可以通过 css 来反转它，不需要改变 jQuery 代码，它的编写方式是它可以在最初隐藏或可见的情况下工作

如果有其他需要，欢迎评论

$(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>

您的可折叠要求，我对 HTML 进行了一些更改以显示输出，您可以随心所欲地拥有它，如果它不是您想要或需要的，请告诉我。

$(document).ready(function(){
  $('button').click(function(){
  if($('.sidebar').hasClass('shrinked')) {
      $('.sidebar').removeClass('shrinked');
      $('.show').show();
      $('.hide').hide();
      $('.list-item span').not('.material-icons-outlined').show();
  }else {
    $('.sidebar').addClass('shrinked');
    $('.show').hide();
    $('.hide').show();
    $('.list-item span').not('.material-icons-outlined').hide();
  }
  });
});

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

.sidebar {
  height: 100%;
  width: 300px;
  background: rgba(0, 0, 0, 0.8);
  transition: width 0.5s;
  overflow: hidden;
}

.sidebar.shrinked {width: 70px;}

.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;
}

.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"> icon </span><span >New reconciliation</span>
      </a>
      <a class="list-item">
        <span class="material-icons-outlined"> icon </span><span >Reports history</span>
      </a>
      <a class="list-item">
        <span class="material-icons-outlined"> icon </span
        ><span >Uploaded files history</span>
      </a>
      <a routerLink="/reports" routerLinkActive="selected" class="list-item">
        <span class="material-icons-outlined"> icon </span><span >Logout</span>
      </a>
    </div>
  </div>
  <div class="page-content-container">
  </div>
</div>

【讨论】：

嘿，@Atul Rajput 谢谢你的回答，但我问的是如何实现可折叠的侧边栏，而不是下拉菜单...
NP sohail，我很乐意提供帮助，但您能否解释一下“可折叠侧边栏”，您希望它如何表现。
只有图标，在你的问题中，我得到了你需要的东西，也将它添加到答案中，坚持住

【解决方案2】：

我假设你正在使用 Bootstrap。

在引导程序中，您需要这些文件：

bootstrap.min.css
jquery.js
bootstrap.min.js

按照这个确切的顺序。 jquery 文件是您将引导按钮下拉和折叠所需的文件。

通常我会从入门样板中复制代码，然后将资产下载到我的本地进行开发。

【讨论】：

【解决方案3】：

如果你想默认只显示图标，添加

.material-icons-outlined {
        display: none;
    }

到一个样式表文件并在你的 html 文件中添加一个按钮

<button onclick="myFunction()">Click</button>

和编辑

<a class="list-item">
   <span class="material-icons-outlined"> source </span>New reconciliation
</a>

到

<a  class="list-item"> icon 1 
<span class="material-icons-outlined"> source New reconciliation</span>
                </a>
                <a class="list-item"> icon 2 
                    <span class="material-icons-outlined"> source Reports history</span>
</a>

由于您使用的是类，因此您应该在函数中添加索引。例子

function myFunction() {
                var x = document.getElementsByClassName("material-icons-outlined");
                if (x[0].style.display === "block") {
                    x[0].style.display = "none";
                    x[1].style.display = "none";
                    x[2].style.display = "none";
                    x[3].style.display = "none";
                } else {
                    x[0].style.display = "block";
                    x[1].style.display = "block";
                    x[2].style.display = "block";
                    x[3].style.display = "block";
                }
            }

【讨论】：