javascript 如何更改 jquery .toggle() 以使用 display:table-cell？

How to change jquery .toggle() to use display:table-cell?

提问by alias51

I am using jquery .toggle() to show a div on a page that has display:none on page load. However, under the default settings jquery inserts display:block, where I would want display:table-cell. How can I achieve this? My attempt so far:

我正在使用 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();

回答by Gabriele Petrioli

Use .toggleClass()instead and use css for the styling..

使用.toggleClass()替代和使用CSS样式..

html

html

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

css

css

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

jquery

查询

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

回答by M1K1O

Use CSS for the styling @Gaby aka G. Petriolior use the .css()method in jQuery.

将 CSS 用于样式@Gaby aka G. Petrioli或使用.css()jQuery 中的方法。

HTML

HTML

<div class="mydiv">test</div>

jQuery

jQuery

$("a#showdiv").click(function() {
    if($(".mydiv").css("display") == "none"){
      $(".mydiv").css("display", "table-cell");
    } else {
      $(".mydiv").css("display", "none");
    }
});

回答by kalley

What you have should work already.

你所拥有的应该已经可以工作了。

In jQuery, unless the style attribute of the element has displayinitially set to something else other than none, when the showis called, all it does is remove the style attribute for display. It doesn't set it block.

在 jQuery 中，除非元素的 style 属性display最初设置为除 之外的其他内容none，否则在show调用 时，它所做的就是删除样式属性以进行显示。它不会将其设置为阻止。

You can see for yourself in this fiddlethat when the button is clicked, the displaythat is set in the CSS is what the element is set to.

你可以在这个小提琴中亲眼看到当按钮被点击时，display在 CSS 中设置的就是元素被设置的内容。

Here's the relevant code in the jQuery source:

这是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;
}

I should note that toggling classes will usually be faster in general because there is less information to check.

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

回答by Jared Farrish

.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/

http://jsfiddle.net/7q27y/

If you understand CSS precedence as well, you don't technically "need" the div.on the latter:

如果您也了解 CSS 优先级，那么从技术上讲，您不需要“需要”div.后者：

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

http://jsfiddle.net/7q27y/

http://jsfiddle.net/7q27y/

Of course, this is due to it's precedenceand the fact it falls afterthe other statement, which both would calculate as the same precedence otherwise. See:

当然，这是由于它的优先级以及它落在另一个语句之后的事实，否则两者都将计算为相同的优先级。看：

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

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