Jquery fadeToggle - 隐藏并回来？

Question

我们有以下脚本：

$('#toggledot1').on('click', function(e) {
e.preventDefault();
$('.dotclick:visible').fadeOut();
$('#parkdaycare').fadeToggle();
});
$('#toggledot2').on('click', function(e) {
e.preventDefault();
$('.dotclick:visible').fadeOut();
$('#displaysales').fadeToggle();
});

这样做，点击div，切换另一个div显示/隐藏，同时隐藏其他div。问题是，如果你再次点击相同的div，它会淡出然后直接淡入。

解？

Answer 1

当你再次点击时，问题是$('.dotclick:visible').fadeOut();淡出当前项目会触发fadeToggle再次显示它

解决方案是省略$('.dotclick:visible')选择器

中的当前目标元素

$('#toggledot1').on('click', function (e) {
    e.preventDefault();
    $('.dotclick:visible').not('#parkdaycare').stop(true, true).fadeOut();
    $('#parkdaycare').stop(true, true).fadeToggle();
});
$('#toggledot2').on('click', function (e) {
    e.preventDefault();
    $('.dotclick:visible').not('#displaysales').stop(true, true).fadeOut();
    $('#displaysales').stop(true, true).fadeToggle();
});