javascript - 相当于jQuery .hide()来设置可见性:隐藏
在jQuery中,有.css()和.hide()方法设置CSS display: none设置。
是否有一个等效函数可以设置.css()设置?
我知道我可以使用.css(),但我更喜欢像.hide()这样的功能。 谢谢。
5个解决方案
384 votes
你可以制作自己的插件。
jQuery.fn.visible = function() {
return this.css('visibility', 'visible');
};
jQuery.fn.invisible = function() {
return this.css('visibility', 'hidden');
};
jQuery.fn.visibilityToggle = function() {
return this.css('visibility', function(i, visibility) {
return (visibility == 'visible') ? 'hidden' : 'visible';
});
};
如果你想重载原始的jQuery toggle(),我不建议...
!(function($) {
var toggle = $.fn.toggle;
$.fn.toggle = function() {
var args = $.makeArray(arguments),
lastArg = args.pop();
if (lastArg == 'visibility') {
return this.visibilityToggle();
}
return toggle.apply(this, arguments);
};
})(jQuery);
的jsfiddle。
alex answered 2019-02-09T10:20:26Z
94 votes
没有内置的,但你可以很容易地写自己的:
(function($) {
$.fn.invisible = function() {
return this.each(function() {
$(this).css("visibility", "hidden");
});
};
$.fn.visible = function() {
return this.each(function() {
$(this).css("visibility", "visible");
});
};
}(jQuery));
然后您可以这样调用:
$("#someElem").invisible();
$("#someOther").visible();
这是一个有效的例子。
James Allardice answered 2019-02-09T10:21:00Z
50 votes
更简单的方法是使用jQuery的toggleClass()方法
CSS
.newClass{visibility: hidden}
HTML
JS
$(document).ready(function(){
$(".trigger").click(function(){
$(".hidden_element").toggleClass("newClass");
});
});
Chaya Cooper answered 2019-02-09T10:21:31Z
21 votes
如果您只需要隐藏标准功能,只需使用visibility:hidden来保持当前布局,您可以使用hide的回调函数来更改标记中的css。 在jquery中隐藏文档
一个例子 :
$('#subs_selection_box').fadeOut('slow', function() {
$(this).css({"visibility":"hidden"});
$(this).css({"display":"block"});
});
这将使用常规酷动画来隐藏div,但在动画完成后,您将可见性设置为隐藏并显示为块。
一个例子:[http://jsfiddle.net/bTkKG/1/]
我知道你不想要$(“#aa”)。css()解决方案,但你没有指定是否因为只使用css()方法而丢失了动画。
h3ct0r answered 2019-02-09T10:22:24Z
0 votes
jQuery hide()/ show()的纯JS等价物:
function hide(el) {
el.style.visibility = 'hidden';
return el;
}
function show(el) {
el.style.visibility = 'visible';
return el;
}
hide(document.querySelector(".test"));
// hide($('.test')[0]) // usage with jQuery
由于满足流畅的界面“设计模式”,我们使用return el。
这是一个有效的例子。
下面我也提供了高度未经推荐的替代方案,但可能更接近“质疑”答案:
HTMLElement.prototype.hide = function() {
this.style.visibility = 'hidden';
return this;
}
HTMLElement.prototype.show = function() {
this.style.visibility = 'visible';
return this;
}
document.querySelector(".test1").hide();
// $('.test1')[0].hide(); // usage with jQuery
当然,这并没有实现jQuery'each'(在@JamesAllardice回答中给出),因为我们在这里使用纯js。
工作范例就在这里。
Kamil Kiełczewski answered 2019-02-09T10:23:23Z