Question

我对Javascript（HTML＆amp; CSS中间版）很陌生，虽然我很擅长通过查找其他示例来自行解决问题。不幸的是，我遇到了这个问题。

我有一个表格，显示3个链接到查看器。单击每个链接，将隐藏的div滑动到右侧。单击其中一个链接时，打开的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

Answer 2

DEMO

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

或

DEMO

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

单击表外部时隐藏div

2 个答案: