jquery - 如何通过单击覆盖悬停功能？

Question

我有一个左侧固定导航菜单，本质上是压缩的。当它悬停时，它会扩展到全宽。

我决定在导航中放置一个切换开关，这样用户就可以选择将导航菜单保持全宽，而无需将鼠标悬停在固定导航上。

简而言之，我希望导航菜单在悬停时展开到全宽，但我希望它在单击切换开关时保持展开到全宽。

问题是我的 jQuery 设置，其中导航菜单在悬停时仍然继续扩展和压缩，但切换开关不会在单击时保持导航菜单扩展。

// Navigation Animation
$('.left').hover(function() {
  $('.left').addClass('show');
}, function() {
  $('.left').removeClass('show');
});

$('.toggle').on('click', function() {
  $('.left').toggleClass('show');
});

.left {
  width: 50px;
}

.left.show {
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="left">
    <div class="toggle"></div>
  </div>
</div class="right">
</div>
</div>

Answer 1

在 CSS 中使用悬停可以避免这个问题:

$('.toggle').on('click', function() {
  $('.left').toggleClass('show');
});

.left {
  width: 50px;
  height: 100px;
  background: red;
}

.left:hover,
.left.show {
  width: 300px;
}

.toggle {
  display: inline-block;
  height: 50px;
  color: #fff;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
</div>
<div class="toggle">Click me</div>