在jQuery的，也有.hide()和.show()其设置方法CSSdisplay: none设置。
是否有等效的功能可以设置visibility: hidden设置？
我知道我可以使用，.css()但我更喜欢一些类似的功能.hide()。谢谢。
等效于 jQuery .hide() 来设置可见性：隐藏
IT技术
javascript
jquery
css
visibility
2021-02-01 22:48:44
6个回答
你可以制作自己的插件。
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);
没有内置的，但您可以很容易地编写自己的：
(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();
这是一个工作示例。
一个更简单的方法是使用 jQuery 的toggleClass()方法
CSS
.newClass{visibility: hidden}
HTML
<a href="#" class=trigger>Trigger Element </a>
<div class="hidden_element">Some Content</div>
JS
$(document).ready(function(){
$(".trigger").click(function(){
$(".hidden_element").toggleClass("newClass");
});
});
如果您只需要 hide only with visible: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() 方法会丢失动画。
纯 JS等效于 jQuery hide()/show() ：
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。
工作示例在这里。