Javascript 在表外单击时隐藏div

我对Javascript（HTML和CSS的中间语言）相当陌生，尽管我很擅长通过查找别人的例子自己解决问题。不幸的是，我在这个问题上遇到了很大的麻烦

我有一个表显示了3个指向查看器的链接。单击每个链接时，都会向右滑动一个隐藏的div。单击其他链接之一时，打开的div将滑回隐藏状态，然后另一个链接将滑开

我要寻找的是，当鼠标再次点击链接时，以及当鼠标在div之外（或者页面上的任何地方）被点击时，再次隐藏div

我试过使用“e.stopPropagation”，但它似乎对我不起作用

非常感谢您的帮助，谢谢

我有一个为练习而创建的JSFIDLE：

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

    }

    });

});

试一试

演示：

或

---

你好，阿伦，非常感谢。这是我希望它在JSFIDLE中的工作方式，但我无法将其传输到浏览器。这与head标记中的脚本有关吗？@user2716530似乎与此无关，因为代码位于dom就绪处理程序中。。。代码的哪一部分不正确working@user2716530同时检查浏览器控制台，看看是否有任何错误。当我点击链接时，什么也没有发生。我以前从未使用过错误控制台，不过我看了一下，它说对象没有“finish”方法。@user2716530看起来您使用的是jQuery<1.9，所以不是

.finish（）

使用

.stop（true，true）

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

});

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