相当于jQuery .hide()设置可见性:hidden

小开

最佳答案

你可以制作自己的插件。

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。

小开

它没有内置的，但你可以很容易地编写自己的:

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

这是一个工作示例。

小开

如果你只需要标准的功能hide only与可见性: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()方法你失去了动画。

小开

一个更简单的方法是使用jQuery的toggleClass ()方法

CSS

.newClass{visibility: hidden}

超文本标记语言

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

小开

纯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是为了满足连贯接口的“设计模式”。

这里是工作示例。

下面我还提供了HIGHLY不推荐替代选项，但它可能更“接近问题”的答案:

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 answer中给出)，因为我们在这里使用纯js。

工作示例是在这里。

小开

这里是一个实现，类似$.prop(name[,value])或$.attr(name[,value])函数。如果b变量被填充，可见性将据此设置，并返回this(允许继续使用其他属性)，否则返回可见性值。

jQuery.fn.visible = function (b) {
if(b === undefined)
return this.css('visibility')=="visible";
else {
this.css('visibility', b? 'visible' : 'hidden');
return this;
}
}

例子:

$("#result").visible(true).on('click',someFunction);
if($("#result").visible())
do_something;