jquery - 一个适用于悬停的简单脚本，但为什么我不能让它适用于点击？

Question

我有一个非常简单的适用于悬停的 js 脚本，但我想将悬停转换为点击功能。当我尝试将悬停切换为单击时，它不起作用。

这是完整的示例脚本，仅供参考。当有人将鼠标悬停在这个类上时，下面会出现一个带背景的小文本。 http://pastebin.com/JMTfvDAa

这是我尝试点击 http://pastebin.com/M0X37APD

如果有人可以帮助我将悬停转换为点击，我将不胜感激！

谢谢，

Answer 1

       $(document).ready(function(){
            $(".menu a").toggle(function() {
                 $(this).next("em").animate({opacity: "show", bottom: "-155"}, "fast");
            }, function() {
                 $(this).next("em").animate({opacity: "hide", bottom: "-165"}, "fast");
            }); 
        });

Jquery 有一个内置的功能。

Answer 2

如果您想通过单击来切换元素的状态，则需要将其状态存储在其他地方——全局变量（不是一个好习惯）或.data()元素本身的变量中。

例子：

$(".menu a").bind('click', function () {
    $el = $(this).next('em');
    if ($el.data('switched')) {
        $el.data('switched',false)
           .animate({
            opacity: 1,
            bottom: "-155"
        }, "fast");
    } else {
        $el.data('switched',true)
           .animate({
            opacity: 0,
            bottom: "-165"
        }, "fast");
    };
});

Answer 3

尝试如下，

$(document).ready(function() {
    $(".menu a").click(function() {
        var $this = $(this);

        if (!$this.hasClass('clicked')) {
            $this.next("em").animate({
                opacity: "show",
                bottom: "-155"
            }, "fast");

            $this.addClass('clicked');
        } else {
            $this.next("em").animate({
                opacity: "hide",
                bottom: "-165"
            }, "fast");

            $this.removeClass('clicked');
        }

    });
});

演示