jQuery 无法处理 onclick 更改跨度文本和显示隐藏 table

Question

我有一个 table 就像我在 JSFiddle 上所说的那样。我想在一开始就隐藏灰色部分。当用户点击"View Detail"时，span文本会发生变化，显示灰色部分。反之亦然，当用户再次点击 "View Detail" 时，跨度文本将变回原来的形状，灰色部分将被隐藏。

我已经尝试写一些 jQuery 来处理它，但我不知道为什么它不起作用。甚至灰色部分也无法显示...有人对此有任何建议吗？

$('.view-detail').on('click',function(){
   $('#table1 tr.show-history').css({"display":"block"});
   $(this).find('.right').text("&#9660;");
});

根据@Dinesh 的建议编辑：切换功能仅对一次点击有效...我如何更改它以使其在每次点击时切换？

$('.view-detail').click(function(){
   $('.show-history').toggle(function(){
        $('#table1 tr.show-history').css({"display":"block"});
        $(this).find('.right').html("&#9660;");
   }, function(){
       $('#table1 tr.show-history').css({"display":"none"});
       $(this).find('.right').html("&#9658;");
      });   
   });

Answer 1

您尚未加载 jquery 并使用 $(this).find('.right').html("▼"); 而不是 $(this).find('.right').text("▼");

var flag = false;
$('.view-detail').on('click',function(){
 $('#table1 tr.show-history').toggle();
   if( flag == false){
    $(this).find('.right').html("&#9660;");
     flag = true;
    }else{
     $(this).find('.right').html("&#9658;");
     flag = false;
    }
});

#table1{
  background-color:white;
  width:500px;
}
.item-history{
  width:80%;
  margin:0 auto;
  background-color:#ebebeb;
}

.show-history{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
<tr class="view-detail">
  <td>
  <span class="right">&#9658;</span> View Detail
  </td>
</tr>
<tr class="show-history">
<td>
<div class="item-history">
<table>
<tr><td>Row 1 History</td></tr>
<tr><td>Row 2 History</td></tr>
<tr><td>Row 3 History</td></tr>
</table>
</div>
</td>
</tr>
<tr>
  <td>Item 1 Description.........................................................................</td>
</tr>
<tr>
<td>Total: 1 Item</td>
</tr>
</table>

jQuery 无法处理 onclick 更改跨度文本和显示隐藏 table

jQuery not working on onclick change span text and display hidden table

html

jquery

onclick

toggle