Javascript/jQuery取消了另一个中的一个函数

Javascript/jQuery cancel a function in another

本文关键字：函数 一个 jQuery 取消 另一个 Javascript      更新时间：2023-09-26

我有一个函数，悬停时，它会显示列表项旁边的图像。这很好。然而，我需要有它，这样当用户点击链接时，图像就会停留在那里。截至目前，当用户单击链接时，悬停功能仍然占主导地位，并且只有当链接悬停在上方时，图像才会显示。

$('[href]').hover(function() {
    $(this).closest('li').prev('li').removeClass('hidden');
}, function() {
    $(this).closest('li').prev('li').addClass('hidden');
});
$('[href]').click(function(ev) {
    ev.preventDefault();
    $(this).closest('li').prev('li').removeClass('hidden');
});
ul, li {
  list-style: none;
  display: inline-block;
}
.hidden {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="hidden"><img src="https://placehold.it/30x30" /></li>
    <li><a href="#">Link</a></li>
</ul>

发生这种情况是因为悬停覆盖了单击。我创建了这个解决方案，所以当点击链接时，图像仍然可见：

var clickHref = false;
$('[href]').hover(function() {
  $(this).closest('li').prev('li').removeClass('hidden');
}, function() {
  if (!clickHref)
    $(this).closest('li').prev('li').addClass('hidden');
});
$('[href]').click(function(ev) {
  ev.preventDefault();
  $(this).closest('li').prev('li').removeClass('hidden');
  clickHref = !clickHref;
});
ul,
li {
  list-style: none;
  display: inline-block;
}
.hidden {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="hidden">
    <img src="https://placehold.it/30x30" />
  </li>
  <li><a href="#">Link</a>
  </li>
</ul>

关闭方法可能适合您的需求：

$('[href]').click(function(ev) {
  ev.preventDefault();
  $(this).off("mouseenter mouseleave").closest('li').prev('li').removeClass('hidden');
});
相关文章：