javascript - 如何制作缩小内容框的折叠边

Question

$(function(){
    $('#hamburgerMenu').on("click", function(){
        $(this).toggleClass('collapsed').promise().done(function(){
            $(".app").addClass("expanded_container--container");
        });

        $("#app_navigation").toggleClass("expanded");
    });
    });

main nav {
  position: fixed;
  z-index: 99;
  left: 0;
  top: 60px;
  height: 100%;
  width: 80px;
  background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 15px 0px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  outline: none;
  overflow-y: hidden;
  overflow-x: hidden;
  -webkit-transition: width 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, height 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
  transition: width 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, height 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
}

.expanded {
  width: 215px;
}

.hamburger-mobile {
  display: none;
}

.nav-items {
  margin: 0;
  padding: 70px 0 20px 0;
  width: 100%;
  height: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.item-wrapper {
  width: 215px;
  height: 50px;
  box-sizing: border-box;
  text-align: left;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  word-wrap: no-wrap;
  min-width: 0;
  color: #darkGrey;
  font-size: 18px;
  margin-left: 5px;
}

.item-wrapper:hover {
  cursor: pointer;
  background-color: rgba(71, 71, 71, 0.05);
  color: #428aff;
}

.item-wrapper i {
  width: 75px;
  text-align: center;
}

.profile {
  height: 60px;
}

.profile > img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  padding: 5px 15px;
}

.selected {
  border-left: 4px solid #428aff;
  color: #428aff;
}

.selected i {
  margin-left: -4px;
}

show {
  transform: translateX(0px);
}

/* Hamburger */
.icon-bar {
  background-color: #474747;
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 4px;
  transition: opacity, transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
}

.hamburger-menu {
  display: block;
  cursor: pointer;
  position: fixed;
  padding: 10px;
  top: 79px;
  left: 19px;
  z-index: 999;
  transition: transform;
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
}

/*.hamburger-menu:hover {
  background-color: rgba(0, 0, 0, .2);
  border-radius: 50%;
}*/
.hamburger-menu:hover > .icon-bar {
  background-color: #428aff;
}

.hamburger-menu:not(.collapsed) {
  transform: translateX(150px);
}

.hamburger-menu:not(.collapsed) .icon-bar:nth-child(1) {
  transform: translateY(4.5px) rotate(-45deg) scaleX(0.5);
}

.hamburger-menu:not(.collapsed) .icon-bar:nth-child(2) {
  opacity: 0;
  /*transform: translateX(-10px);*/
}

.hamburger-menu:not(.collapsed) .icon-bar:nth-child(3) {
  transform: translateY(-1px) rotate(45deg) scaleX(0.5);
}

/* ./Hamburger */
/* Media queries */
@media screen and (max-width: 768px) {
  main {
    height: 50px;
    width: 100%;
  }

  .hamburger-menu {
    display: none;
  }

  .hamburger-mobile {
    cursor: pointer;
    position: fixed;
    padding: 10px;
    top: 8;
    left: 0;
    z-index: 999;
    transition: transform;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
    display: block;
  }

  .hamburger-mobile:hover > .icon-bar {
    background-color: #428aff;
  }

  .hamburger-mobile:not(.collapsed) .icon-bar:nth-child(1) {
    transform: translateY(6px) rotate(-45deg);
  }

  .hamburger-mobile:not(.collapsed) .icon-bar:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
  }

  .hamburger-mobile:not(.collapsed) .icon-bar:nth-child(3) {
    transform: translateY(-6px) rotate(45deg);
  }

  /* ./Hamburger */
  .expanded-mobile {
    height: 100%;
  }

  .item-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .nav-items {
    overflow-y: hidden;
  }

  .selected {
    border: none;
  }

  .selected > i {
    margin-left: 0;
  }
}
/*--------------------------------------------------------------
# App shrink-content container
--------------------------------------------------------------*/
div.app {
    -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;;
    transition: all 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
}

.shrink_container--container {
    margin-left: 215px;
}

.expanded_container--container {
    margin-left: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en" >
<body>
<main id="main">
<div class="app shrink_container--container">
<nav id="app_navigation" class="expanded">
    <ul class="nav-items">
        <div class="item-wrapper" onclick="toggleSelected()">
            <i class="far fa-calendar-alt"></i> Item 1
        </div>

        <div class="item-wrapper selected" onclick="toggleSelected()">
            <i class="far fa-address-card"></i> Item 2
        </div>

        <div class="item-wrapper" onclick="toggleSelected()">
            <a href="/ayschange/buy-or-sell">
                    <i class="far fa-envelope"></i> Achat
            </a>
        </div>
        <div class="item-wrapper profile" onclick="toggleSelected()">
            <a href="/ayschange/accounts/?action=logout">
                    <i class="fas fa-sign-out-alt"></i> Transactions
            </a>
        </div>
        <div class="item-wrapper profile" onclick="toggleSelected()">
            <a href="/ayschange/accounts/?action=logout">
                    <i class="fas fa-sign-out-alt"></i> Rapports
            </a>
        </div>

        <div class="item-wrapper profile" onclick="toggleSelected()">
            <a href="/ayschange/accounts/?action=logout">
                    <i class="fas fa-sign-out-alt"></i> Déconnexion
            </a>
        </div>

    </ul>
</nav>
<div class="hamburger-menu" id="hamburgerMenu" onclick="toggleMenu()">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</div>

<div class="hamburger-mobile collapsed" id="hamburgerMobile" onclick="toggleMobile()">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</div>
</div>
</main>
</body>
</html>

我有一个侧面导航栏，当页面加载时初始大小为 80px，当我切换它以扩展为 215px 大小时，它确实如此，但右侧的容器不会缩小，我不知道我是什么在我的 js 代码中丢失，我不想复制所有代码，但我的主要问题是 js 代码有人可以帮助我吗？

JS

$(function(){
    $('#hamburgerMenu').on("click", function(){
        $(this).toggleClass('collapsed').promise().done(function(){
            $(".app").addClass("expanded_container--container");
        });
        $("#app_navigation").toggleClass("expanded");
    });
    });

CSS

.expanded {
  width: 215px;
}
.shrink_container--container {
    margin-left: 215px;
}

.expanded_container--container {
    margin-left: 80px;
}

HTML

<div>
<nav id="app_navigation" class="expanded">
    <ul class="nav-items">
        <div class="item-wrapper">
            <i class="far fa-calendar-alt"></i> Item 1
        </div>
    </ul>
</nav>
<div class="app shrink_container--container">
</div>
</div>

标签： javascripthtmlcss