Question

我无法找到一种方法来关闭此切换功能。它将开心愉快，但结束是一个不同的故事。

控制台错误：property 'toggle' of undefined at focusMobileSearch
代码：

function focusMobileSearch() {

    $('.mobile-search').removeClass('is-focused');

    function reveal() {
            $('.search-dropdown').css({ 'visibility': 'visible', 'height': '64px' });
            $('.input-group').delay('200').queue(function (next) {
                $(this).css('visibility', 'visible');
                next();
            });
    }

    reveal().toggle();

}

这是我以前的代码（它有一个奇怪的问题，第一次点击什么也没做：

function focusMobileSearch() {

    $('.mobile-search').removeClass('is-focused');

    function reveal() {
        $('.search-dropdown').css({ 'visibility': 'visible', 'height': '64px' }).toggle();
        $('.input-group').delay('240').queue(function (next) {
            $(this).css('visibility', 'visible');
            next();
        }).toggle();
    }

    reveal();

}

谢谢！

Answer 1

使用课程进行切换。

function focusMobileSearch() {
  $('.mobile-search').removeClass('is-focused');

  function reveal() {
    $('.search-dropdown').toggle('visible');
    $('.input-group').delay('240').queue(function(next) {
      $(this).toggle('visible');
      next();
    });
  }

  reveal();

}

.visible {
  visibility: visible;
}

.search-dropdown.visible {
  height: 64px;
}

Answer 2

这解决了它：

function focusMobileSearch() {

    $('.ef-header-alt__search').removeClass('is-focused');

    function reveal() {
        if ($('.search-dropdown').css('visibility') == 'hidden') {
            $('.search-dropdown').css({ 'visibility': 'visible', 'height': '64px' });
            $('.input-group').delay('240').queue(function (next) {
                $(this).css('visibility', 'visible');
                next();
            })
        } else {
            $('.search-dropdown').css({'visibility': 'hidden', 'height': '0px'});
            $('.input-group').css('visibility', 'hidden');
        }
    }

    reveal();

}

非常感谢：@Taplar让我知道切换不影响可见性，而只是显示属性。

如何使这个jQuery Toggle功能关闭

2 个答案: