Question

我有一个隐藏的div，应该显示为table而不是block。切换的默认行为是将最初隐藏的（display: none;）对象显示为block（display: block;）。但我希望将其显示为一个表格（display: table;）（请参阅this以了解为什么在您怀疑我的理智时这可能有用）。这可能吗？

我可以将对象初始化为表格，然后将其隐藏在ready-function中。但是这会在隐藏之前将对象显示给用户几微秒，并被视为丑陋的闪烁。

最后一个选项可能是使用.css('display', 'table')之类的东西，但如果可以使用，切换会更好更清洁。

一个例子：

<div id="hidden_table" style="display: none;">                             
  <div style="display: table-row;">                                        
    <div style="display: table-cell;">Cell 1</div>                         
    <div style="display: table-cell;">Cell 2</div>                         
  </div>                                                                   
  <div style="display: table-row;">                                        
    <div style="display: table-cell;">Cell 3</div>                         
    <div style="display: table-cell;">Cell 4</div>                         
  </div>                                                                   
</div>                                                                     
<a onclick='jQuery("#hidden_table").toggle();'>Click Me</a>

在此示例中，当＆＃34; Click Me＆＃34;时，display-property将设置为block。被打了。但我希望将它设置为表格。当然我知道这可以通过制作一些我之前写的自定义代码来实现。但是我想知道我遗失的.toggle()是否有一些技巧？

Answer 1

像你自己一样写一个转换器，

function toggleDisplay(element) {
  var display = element.css('display');
  element.css('display',(display==="table")?"none":"table");
}

并使用它，

toggleDisplay($('#element'));

Answer 2

您可以轻松地将其显示为表格。首先在css样式表中设置显示表，然后使用jquery隐藏它，然后应用切换。

的CSS：

div{
    display: table;
}

jquery的：

$('div').css('display','none');
$('button').on('click',function(){
$('div').toggle();
});

demo

立即检查它，您应该看到div显示为表格。

Answer 3

我自己找到了解决方案：

1。当.toggle()被调用隐藏元素时，它将更新元素内联样式显示属性（如果未定义则添加它）到{{ 1}}。所以：

none

会导致：

<div id="my_test">Foo</div>
<script>jQuery("#my_test").toggle();</script>

2。当<div id="my_test" style="display: none;">Foo</div>被调用显示元素时，它还会更新元素内联样式显示属性（如果未定义则添加它）。但是这次它将从低优先级的定义复制display-property，如果找不到低优先级定义，则默认为.toggle()。因此，如果我们在原始示例中添加内联样式表，它可能如下所示：

block

当点击“Click Me”时，内联显示属性将从内部样式表中复制，从而导致：

<style>                                                                    
  #hidden_table {display: table; }                                         
</style>                                                                   
<div id="hidden_table" style="display: none;">                             
  <div style="display: table-row;">                                        
    <div style="display: table-cell;">Cell 1</div>                         
    <div style="display: table-cell;">Cell 2</div>                         
  </div>                                                                   
  <div style="display: table-row;">                                        
    <div style="display: table-cell;">Cell 3</div>                         
    <div style="display: table-cell;">Cell 4</div>                         
  </div>                                                                   
</div>
<a onclick='jQuery("#hidden_table").toggle();'>Click Me</a>

这正是我的要求！这样做：

将... <div id="hidden_table" style="display: table;"> ...添加到元素。
在元素的内联/文件css定义中设置所需的display-property。

如何使用.toggle（）将div显示为表

3 个答案: