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

<强>替代

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

在调用toggle（）之前，Div淡出

1 个答案: