Jquery 单击时暂停菜单动画，下次单击时继续

我有一个菜单动画，我正在鼠标上使用，这是伟大的工作，但我不太确定如何继续。将链接悬停在上方时，div的宽度将设置动画，模拟动画下划线。我希望动画停止，如果该菜单项被点击，基本上保持该项目下划线，但如果任何其他菜单项被点击，然后继续。这是在一个单页网站中使用的，我基本上想指出用户在网站的哪个部分

基本代码：

HTML

jQuery

$(document).ready(function(){
  $("#contactmenu").hover(function(){
      $(".underlinecontact").stop().animate({width: "100%"});
    },function(){
      $(".underlinecontact").stop().animate({width: "0%"});
  });
});

小提琴在这里：

---

我尝试了一个unbind函数让它停止，这是有效的，但是我不知道如何重新启动它。任何帮助都将不胜感激

首先，您可以将所有的

悬停

处理程序压缩为一个处理程序。此外，如果将

类添加到单击的锚定中，则可以检查其是否存在，并且仅在其未处于
活动状态时设置动画：

$('#Menu a').hover(function() {
    if (!$(this).hasClass('active')) {
        $(this).children('div').stop().animate({ width: '100%' });
    }
}, function() {
    if (!$(this).hasClass('active')) {
        $(this).children('div').stop().animate({ width: 0 });  
    }
});

然后，只需附加一个单击处理程序即可触发
mousenter
/
mouseleave
事件：

$('#Menu a').click(function() {
   $('#Menu a[href*="page"]').not(this).removeClass('active').trigger('mouseleave');
    $(this).addClass('active');
});

因此，从所有锚点（单击的锚点除外）中删除
活动的
类，并触发
鼠标移动
以执行宽度为
0
的动画，然后将
活动的
类添加到单击的锚点，以便在悬停时不会出现动画

非常感谢。就是这样。我想有一种方法可以将这一切结合起来，但我在jQuery方面还不够熟练。谢谢你帮助一个笨蛋！既然主页上有主页项目，那么在加载时对其加下划线怎么样？我试过这样做：这是可行的，但一旦你把鼠标悬停在“主页”上，它就会将宽度设置回0。有什么想法吗？只要把
active
类添加到anchor-Dang…我觉得自己很愚蠢。我试图添加类，但忘记添加家长…再次感谢！
$('#Menu a').hover(function() {
    if (!$(this).hasClass('active')) {
        $(this).children('div').stop().animate({ width: '100%' });
    }
}, function() {
    if (!$(this).hasClass('active')) {
        $(this).children('div').stop().animate({ width: 0 });  
    }
});

$('#Menu a').click(function() {
   $('#Menu a[href*="page"]').not(this).removeClass('active').trigger('mouseleave');
    $(this).addClass('active');
});