[英]How do I make this jQuery Toggle function close
我在想办法关闭此切换功能时遇到麻烦。 它将快乐地打开,但是关闭则是另外一回事了。
控制台错误: 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();
}
谢谢!
使用类进行切换。
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; }
这修复了它:
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让我知道切换不会影响可见性,而只是显示属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.