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