2

私は Javascript (HTML と CSS の中級者) にはまったく慣れていませんが、他の例を調べて自分で作業するのはかなり得意です。残念ながら、私はこれに重大な問題を抱えています。

ビューアへの 3 つのリンクを表示するテーブルがあります。各リンクをクリックすると、非表示の div がスライドして右側に開きます。他のリンクの 1 つがクリックされると、開いている div がスライドして非表示になり、次に別の div がスライドして開きます。

私が探しているのは、マウスがリンクを再度クリックしたとき、およびマウスがdivの外側（または実際にはページのどこか）をクリックしたときに、divを再び非表示にすることです。

「e.stopPropagation」を使用してみましたが、うまくいかないようです。

どんな助けでも大歓迎です-ありがとう。

練習用に作成した jsFiddle があります: http://jsfiddle.net/AuU6D/3/

これは私のjQueryコードです:

jQuery(function ($) {
    $('a.panel').click(function () {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active'),
            animIn = function () {
                $target.addClass('active').show().css({
                    left: -($target.width())
                }).animate({
                    left: 0
                }, 500);

            };

        if (!$target.hasClass('active') && $other.length > 0) {
            $other.each(function (index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    left: -$this.width()
                }, 500, animIn);                
            });
        } else if (!$target.hasClass('active')) {
            animIn();

    }

    });

});
4

2 に答える 2

0

デモ

 $(document).click(function (e) {
        if (!$(e.target).hasClass('panel')) {
            $('div.panel').removeClass('active').removeAttr('style').css('background', ' #e4e4e4');
        }
    });

また

デモ

$(document).click(function (e) {
    console.log($(e.target).hasClass('panel'));
    if (!$(e.target).hasClass('panel')) {
        $('div.panel.active').removeClass('active').finish().animate({
            left: -$('#right').width()
        }, 500);
    }
});
于 2013-08-26T02:47:44.510 に答える
0

試す

jQuery(function ($) {

    $('a.panel').click(function () {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active'),
            animIn = function () {
                $target.addClass('active').show().css({
                    left: -($target.width())
                }).finish().animate({
                    left: 0
                }, 500);

            };

        if (!$target.hasClass('active') && $other.length > 0) {
            $other.each(function (index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    left: -$this.width()
                }, 500, animIn);                
            });
        } else if (!$target.hasClass('active')) {
            animIn();
        } else if ($target.hasClass('active')) {
                $target.removeClass('active').finish().animate({
                    left: -$target.width()
                }, 500);                
        }

    });

    $(document).click(function(e){
        var $target = $(e.target), $active = $('div.panel.active');

        if($active.length && $target.closest('a.panel').length == 0 && $target.closest($active).length == 0){
                $active.removeClass('active').finish().animate({
                    left: -$active.width()
                }, 500);                
        }
    })

});

デモ:フィドル

于 2013-08-26T02:42:28.370 に答える