2

我对 Javascript（HTML 和 CSS 中级）很陌生，尽管我很擅长通过查找其他人的示例自行解决问题。不幸的是，我在这方面遇到了很大的麻烦。

我有一个表格，显示 3 个指向查看器的链接。单击每个链接时，都会向右滑动一个隐藏的 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

尝试

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 回答
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 回答