javascript - 单击表格外部时隐藏 div

Question

我是 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();

    }

    });

});

Answer 1

尝试

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);                
        }
    })

});

演示:Fiddle