Javascript 按钮在最小化或最大化菜单之间切换，但：悬停会阻止菜单最小化

正如标题所解释的。。我有一个侧栏菜单，可以通过点击按钮在最小化和最大化菜单之间切换。处于最小化状态。。如果此人将鼠标悬停在菜单上。。它将暂时展开，直到鼠标离开

问题在于悬停状态。。它会阻止菜单最小化，直到他们在单击按钮后将鼠标移离按钮。。但我想不出别的办法。有什么建议吗

我这里有一个非常简化的JSFIDLE：

我试图模仿的菜单：

HTML:

<div class="sidemenu">
  <nav>
    <ul>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
    </ul>
  </nav>
  <button>Expand or Minimize</button>
</div>

.sidemenu {
  transition: all .3s ease;
  width: 200px;
  &:hover.minimized {
    width: 200px;
  }
  &.minimized {
    width: 100px;
  }
}

.side-menu-wrapper {
  width: 200px;
  position: relative;
  .minimized {
    width: 100px;
    .sidemenu:hover {
      width: 200px;
    }
  }
  .sidemenu {
    transition: all .3s ease;
    width: 100%;
  }
  button {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

---

为菜单使用包装器元素，该元素设置宽度和高度，并具有相对位置。将菜单切换按钮添加为菜单的同级按钮，并将其绝对定位在菜单底部

新的HTML大纲：

<div class="side-menu-wrapper">
  <div class="sidemenu">
    <nav>
      <ul>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
      </ul>
    </nav>
  </div>
  <button>Expand or Minimize</button>
</div>

---

我更新了你的

为菜单使用包装器元素，它设置宽度和高度，并具有相对位置。将菜单切换按钮添加为菜单的同级按钮，并将其绝对定位在菜单底部

新的HTML大纲：

<div class="side-menu-wrapper">
  <div class="sidemenu">
    <nav>
      <ul>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
      </ul>
    </nav>
  </div>
  <button>Expand or Minimize</button>
</div>

---

我更新了你的

单击按钮后是否立即变小？当鼠标移出后再次悬停在按钮上时，大小仍然需要改变，对吗？@Snow完全正确。如果我要移除悬停，它将完全最小化我希望它的方式。。但是我也需要悬停在那里。不幸的是，悬停影响会因此而阻止最小化影响。不幸的是，我似乎想不出解决办法。你想在点击按钮后立即变小吗？当鼠标移出后再次悬停在按钮上时，大小仍然需要改变，对吗？@Snow完全正确。如果我要移除悬停，它将完全最小化我希望它的方式。。但是我也需要悬停在那里。不幸的是，悬停影响会因此而阻止最小化影响。不幸的是，我似乎想不出解决的办法。这太棒了！现在已经很晚了，但是明天上班的时候我一定会去看看的。非常感谢！这太棒了！现在已经很晚了，但是明天上班的时候我一定会去看看的。非常感谢！