Question

我有一个左侧固定的导航菜单，它本身就是浓缩的。当它徘徊时，它会扩展到全宽。

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

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

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

＆＃13;

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

＆＃13;

.left {
  width: 50px;
}

.left.show {
  width: 300px;
}

＆＃13;

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

＆＃13;

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>

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

1 个答案: