jquery - 如何使用 .toggle() 将 div 显示为表格

Question

我有一个隐藏的 div，它应该显示为 table 而不是 block。 toggle 的默认行为是将最初隐藏的 (display: none;) 对象显示为 block (display: block;)。但我想将其显示为表格 (display: table;)(请参阅 this 以了解如果您怀疑我的理智，这可能会有用)。这可能吗？

我可以将对象初始化为表格，然后将其隐藏在就绪函数中。但这会使对象在隐藏之前对用户可见几微秒，并被视为丑陋的闪烁。

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

一个例子:

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

在本例中，当点击“点击我”时，显示属性将被设置为block。但我希望将其设置为桌面。当然，我知道这可以通过编写我之前编写的一些自定义代码来实现。但是我想知道我是否缺少 .toggle() 的一些技巧？

Answer 1

像你自己写一个切换器，

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

并使用它，

toggleDisplay($('#element'));