Jquery toggle设置属性为display: table而不是block

jquery toggle sets property as display : table instead of block

本文关键字：table block display toggle 设置 属性 Jquery      更新时间：2023-09-26

我在玩一些代码时遇到了以下情况，其中toggle on a table标签将属性样式设置为"display: table"而不是"display: block"。(需要使用firebug等开发人员工具才能看到这种行为)。根据我的理解，toggle只将显示设置为'none'或'block'。

代码如下:

<button class="read">Toggle Table</button>
<table class="displayReviews"></table>
<br>
<button class="write">Toggle Form</button>
    <form class="writeForm">Form</form>
<script>
$('button').click(function() {
   if($(this).attr("class") == "read")
   {
       $(".displayReviews").toggle();
   }
   else if($(this).attr("class") == "write")
   {
       $(".writeForm").toggle();
   }    
});
</script>
<style>
.writeForm
{
    display:none;    
}
.displayReviews
{
   display:none;    
}
</style>

jsfiddle: https://jsfiddle.net/thL7Lyff/

谁能告诉我为什么会这样? 
<script>
$('button').click(function() {
   if($(this).attr("class") == "read")
   {
     if($(".displayReviews").css("display") == "none"){
       $(".displayReviews").css("display", "block");
     } else {
      $(".displayReviews").css("display", "none");
     }
   }
   else if($(this).attr("class") == "write")
   {
       $(".writeForm").toggle();
   }    
});
</script>
相关文章：