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

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

谁知道为什么？

Answer 1

在 jQuery 1.9+ 中以这种方式使用 toggle 是行不通的。他们删除了该功能。

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

Documentation

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