Question

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

Answer 1

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

Answer 2

使用CSS作为样式 @Gaby aka 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");
    }
});

Answer 3

你所拥有的应该已经有效了。

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

您可以在this fiddle中看到自己在单击按钮时，CSS中设置的show是元素设置的内容。

以下是jQuery source中的相关代码：

display

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

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/

如何更改jquery .toggle（）以使用display：table-cell？

4 个答案: