Javascript/jQuery 取消另一个函数

Question

我有一个功能，在悬停时，它会在列表项旁边显示图像。那很好用。但是，我需要拥有它，以便当用户单击链接时，图像会保留在那里。截至目前，当用户单击链接时，悬停功能仍然有效，图像仅在悬停在链接上时才会显示。

$('[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>

Answer 1

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

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>