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

I have a hidden div that should be displayed as a table instead of block. The default behavior of toggle is to show an initially hidden (display: none;) object as a block (display: block;). But I want to display it as a table (display: table;) instead (see this to understand why that could be useful if you doubt my sanity). Is that possible?

我有一个隐藏的div应该显示为表而不是块。切换的默认行为是将最初隐藏的(display:none;)对象显示为块(display:block;)。但是我希望将它显示为一个表(display:table;)(请参阅此内容以了解为什么在您怀疑我的理智时这可能有用)。那可能吗?

I could initialize the object as a table and then hide it in the ready-function. But that would render the object visible to the user for some microseconds before hidden and perceived as an ugly flickering.

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

The last option is maybe to use something like .css('display', 'table'), but toggle would be nicer and cleaner if it could be used.

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

An example:

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

In this example the display-property would be set to block when "Click Me" is hit. But I would like it to be set to table. And of course I know this could be achieved by crafting some custom code as I wrote earlier. But I want to know if there is some trick with .toggle() that I am missing?

在此示例中,当点击“Click Me”时,display-property将被设置为阻止。但我希望将它设置为表格。当然我知道这可以通过制作一些我之前写的自定义代码来实现。但我想知道是否有一些我失踪的.toggle()技巧?

3 个解决方案

#1

Write a toggler on your own like,

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

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

And use it by,

并使用它,

toggleDisplay($('#element'));

#2

You can easily make it displayed as table. First set display table in your css stylesheet then hide it by using jquery, then apply the toggle.

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

css:

div{
    display: table;
}

jquery:

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

demo

Inspect it now and you should see the the div is displayed as table.

现在检查它,您应该看到div显示为表格。

#3

I found the solution myself:

我自己找到了解决方案:

1. When .toggle() is called to hide an element it will update the elements inline style display property (adding it if not defined) to none. So:

1.当调用.toggle()来隐藏元素时,它将更新元素内联样式显示属性(如果未定义则添加它)为none。所以:

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

would result in:

会导致:

<div id="my_test" style="display: none;">Foo</div>

2. When .toggle() is called to show an element it will also update the elements inline style display property (adding it if not defined). But this time it will copy the display-property from a definition of lower priority, defaulting to block if no lower-priority definition could be found. So if we add an inline stylesheet to the original example it could look like this:

2.当调用.toggle()来显示元素时,它还将更新元素内联样式显示属性(如果未定义则添加它)。但是这次它将从较低优先级的定义复制display-property,如果找不到较低优先级的定义,则默认为block。因此,如果我们在原始示例中添加内联样式表,它可能如下所示:

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

And when "Click Me" is hit now the inline display property would be copied from the internal stylesheet resulting in:

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

...
<div id="hidden_table" style="display: table;">
...

And this is exactly what I was asking for! Do this:

这正是我要求的!做这个:

Add style="display: none;" to the element.

添加style =“display:none;”对元素。

Set the desired display-property in an inline/file css-definition for the element.

在元素的内联/文件css定义中设置所需的display-property。

#1