jquery - 在调用 toggle() 之前 Div 淡出

Question

我正在尝试创建自定义切换。这是预定义切换的代码：

$('.information').toggle(function() {
    $('.work-overlay').fadeOut();
    $('.information-overlay').fadeIn();
    $('body').css({'overflow':'visible'});
    e.preventDefault();
}, function() {
    $('.work-overlay').fadeOut();
    $('.information-overlay').fadeOut();
    $('body').css({'overflow':'hidden'});
    e.preventDefault();
});

这是被调用的代码：

$(".information").click(function() {
    $(".information").toggle();
})

但是，在单击任何内容之前，.informationdiv 会淡出。

有人会知道为什么吗？

Answer 1

toggle在 jQuery 1.9+中使用这种方式不起作用。他们删除了该功能。

.toggle(function, function, ... ) removed

文档

Alt

var infoClicked =false;
$(".information").click(function () {
    if (infoClicked == false) {
        $('.work-overlay').fadeOut();
        $('.information-overlay').fadeIn();
        $('body').css({
            'overflow': 'visible'
        });
        infoClicked = true;
        e.preventDefault();
    } else {
        infoClicked = false;
        $('.work-overlay').fadeOut();
        $('.information-overlay').fadeOut();
        $('body').css({
            'overflow': 'hidden'
        });
        e.preventDefault();
    }
})

或者试试这个

var visible = 'hidden'
$(".information").click(function (e) {
      $('.work-overlay').fadeToggle();
      $('.information-overlay').fadeToggle();
      $('body').css({
          'overflow': visible
      });
      visible == 'visible' ? visible = 'hidden' : visible = 'visible';
      e.preventDefault();
  });