Question

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

以下是完整的示例脚本，仅供参考。当有人在这个课程上盘旋时，下面会出现一个带背景的小文字。 http://pastebin.com/JMTfvDAa

如果有人可以帮助我将徘徊转换为点击，我会非常感激！

谢谢，

Answer 1

如果你想通过点击来切换元素的状态，你需要将其状态存储在其他地方 - 全局变量（不是一个好习惯）或者在.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 2

尝试如下，

$(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');
        }

    });
});

DEMO

Answer 3

       $(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有一个内置函数。

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

3 个答案: