jquery - 单击时动画链接下划线而不是悬停时下划线？

Question

无法理解如何通过单击而不是悬停来重新创建此效果？

我不太擅长 jQuery，因此无法弄清楚如何在单击时触发此操作。我发现这个网站是为了帮助创建我想要的效果(从左到右下划线)。该演示可以在以下链接中看到...

http://bradsknutson.com/blog/css-sliding-underline/

我目前正在使用以下 js 淡入 div，并且我希望该行同时滑入。

新jsfiddle - http://jsfiddle.net/tfgou78c/4/

JS:

$(function() {
    $('.submit_button').click(function() {
        var elem = $('.form_wrap');
        if (elem.css('display') == 'none') {
            elem.fadeIn(1750);
        }
        else {
            elem.fadeOut(1750);
        }
    });
});

CSS:

.form_wrap {
 display: none;
 }

/* sliding underline LEFT TO RIGHT */
.sliding-u-l-r {
display: inline-block;
}

.sliding-u-l-r:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}

.sliding-u-l-r:hover:after {
width: 100%;
background: blue;
}

任何帮助将不胜感激。

Answer 1

由于此方法使用 CSS 事件 :hover，因此您无法仅在代码上更改 click 的事件，因为没有 click< 的方法 CSS。您可以拥有:

1. 您可以使用 Jquery 对其进行标记，以便将 CSS 匹配更改为:

   .sliding-u-l-r:hover:after
   

   至

   .sliding-u-l-r.clicked:after
   

   然后使用 Jquery:

   $('.sliding-u-l-r').on('click',function(){
      $(this).toggleClass('clicked');
   })
   

   检查这个Demo Fiddle