我是 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();
}
});
});
最佳答案
尝试
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
关于javascript - 单击表格外部时隐藏 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18435774/