![](/img/trans.png)
[英]jQuery css(“display”,“table-cell”) isn't immediately applied
[英]How to change jquery .toggle() to use display:table-cell?
我正在使用jquery .toggle()在頁面加載上顯示display:none的頁面上顯示div。 但是,在默認設置下,jquery插入display:block,我想要顯示:table-cell。 我怎樣才能做到這一點? 我到目前為止的嘗試:
<div class="mydiv" style"display:none">test</div>
.mydiv {
display:table-cell;
}
$("a#showdiv").click(function() {
$(".mydiv").toggle();
使用.toggleClass()
代替並使用css進行樣式化。
HTML
<div class="mydiv table-hidden">test</div>
CSS
.mydiv {
display:table-cell;
}
.mydiv.table-hidden{
display:none;
}
jQuery的
$("a#showdiv").click(function() {
$(".mydiv").toggleClass('table-hidden');
}
使用CSS作為樣式@Gaby又名G. Petrioli或在jQuery中使用.css()
方法。
HTML
<div class="mydiv">test</div>
jQuery的
$("a#showdiv").click(function() {
if($(".mydiv").css("display") == "none"){
$(".mydiv").css("display", "table-cell");
} else {
$(".mydiv").css("display", "none");
}
});
你有什么應該工作。
在jQuery的,除非該元素的樣式屬性已display
初始設置為別的東西比其他none
,當show
被調用時,它的作用是除去用於顯示的樣式屬性。 它沒有設置阻止。
你可以在這個小提琴中看到,單擊按鈕時,CSS中設置的display
就是元素的設置。
這是jQuery源代碼中的相關代碼:
function showHide( elements, show ) {
var display, elem, hidden,
values = [],
index = 0,
length = elements.length;
for ( ; index < length; index++ ) {
elem = elements[ index ];
if ( !elem.style ) {
continue;
}
values[ index ] = data_priv.get( elem, "olddisplay" );
display = elem.style.display;
if ( show ) {
// Reset the inline display of this element to learn if it is
// being hidden by cascaded rules or not
if ( !values[ index ] && display === "none" ) {
elem.style.display = "";
}
// Set elements which have been overridden with display: none
// in a stylesheet to whatever the default browser style is
// for such an element
if ( elem.style.display === "" && isHidden( elem ) ) {
values[ index ] = data_priv.access( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );
}
} else {
if ( !values[ index ] ) {
hidden = isHidden( elem );
if ( display && display !== "none" || !hidden ) {
data_priv.set( elem, "olddisplay", hidden ? display : jQuery.css(elem, "display") );
}
}
}
}
// Set the display of most of the elements in a second loop
// to avoid the constant reflow
for ( index = 0; index < length; index++ ) {
elem = elements[ index ];
if ( !elem.style ) {
continue;
}
if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
elem.style.display = show ? values[ index ] || "" : "none";
}
}
return elements;
}
我應該注意,切換類通常會更快,因為要檢查的信息較少。
.display-none {
display: none;
}
div.display-table-cell {
display: table-cell;
}
<button id="showdiv">Show/Hide</button>
<div class="mydiv display-none">test</div>
<div class="mydiv display-none">test</div>
<div class="mydiv display-none">test</div>
<div class="mydiv display-none">test</div>
$("#showdiv").click(function() {
$(".mydiv").toggleClass('display-table-cell');
});
如果你也理解CSS優先級,那么你在技術上並不“需要” div.
關於后者:
div.display-table-cell {
display: table-cell;
}
當然,這是由於它的優先級以及它落在另一個語句之后的事實,否則兩者都將計算為相同的優先級。 看到:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.