0

ホバーで機能する非常に単純なjsスクリプトがありますが、ホバーをクリック機能に変換したいと思います。ホバーをクリックに切り替えようとすると、機能しません。

参考までに、完全なサンプルスクリプトを次に示します。誰かがこのクラスにカーソルを合わせると、背景付きの小さなテキストが下に表示されます。 http://pastebin.com/JMTfvDAa

これが私がクリックしようとしたものです http://pastebin.com/M0X37APD

誰かが私がホバーをクリックに隠すのを手伝ってくれるなら、私はそれを大いに感謝します！

ありがとう、

4

3 に答える 3

0

クリックで要素の状態を切り替えたい場合は、その状態を別の場所（グローバル変数（良い習慣ではない）または.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");
    };
});
于 2012-05-17T19:08:31.630 に答える
0

以下のようにしてみてください、

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

    });
});

デモ

于 2012-05-17T19:09:26.143 に答える
0 
       $(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にはそのための組み込み関数があります。

于 2012-05-17T19:17:59.453 に答える