如何将jquery的.toggle()方法改为使用display:table-cell？

Question

我正在使用jquery .toggle()来显示页面上默认为display:none的div。然而，在默认设置下，jquery会插入display:block，而我想要的是display:table-cell。我该如何实现？我目前的尝试：

<div class="mydiv" style"display:none">test</div>

.mydiv {
display:table-cell;
}

$("a#showdiv").click(function() {
    $(".mydiv").toggle();

- alias51

---

你可以切换一个类名，将其在 display: none 和 display: table-cell 之间进行更改。 - Jared Farrish

Answer 1

使用 .toggleClass() 替代，并使用CSS进行样式设置。

html

<div class="mydiv table-hidden">test</div>

层叠样式表

.mydiv {
    display:table-cell;
}
.mydiv.table-hidden{
    display:none;
}

jQuery

$("a#showdiv").click(function() {
    $(".mydiv").toggleClass('table-hidden');
}

- Gabriele Petrioli

Answer 2

使用 CSS 进行样式化，或在 jQuery 中使用 .css() 方法。@Gaby aka G. Petrioli

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

- m1k1o

Answer 3

你现有的代码应该已经可以正常工作了。

在jQuery中，除非元素的style属性最初设置为除"none"之外的其他值，否则当调用show方法时，它只会删除display的style属性。它不会将其设置为块级元素。

你可以通过这个示例自行查看：当单击按钮时，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;
}

我应该注意的是，通常情况下切换类会更快，因为需要检查的信息较少。

- kalley

---

仅为纪念：jQuery确实恢复了初始显示设置，但如果存在多个@media定义，则不会恢复设备/浏览器使用的设置。 - savedario

Answer 4

.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');
});

http://jsfiddle.net/7q27y/

如果你也理解CSS的优先级，那么在后面的代码中就不必要使用“div.”了。

div.display-table-cell {
    display: table-cell;
}

http://jsfiddle.net/7q27y/

当然，这是由于它的优先级以及它排在另一个语句之后，否则两者将计算为相同的优先级。请参见：

http://jsfiddle.net/7q27y/2/

- Jared Farrish