jQuery不工作onclick更改跨度文本和显示隐藏表

Question

我有一个表，就像我在JSFiddle上所述的表。 我想在最开始时隐藏灰色部分。当用户点击“查看详细信息”时，跨度文本将被改变，灰色部分将被显示。反之亦然，当用户再次点击“查看细节”时，跨度文本将变回原始形状，灰色部分将被隐藏。

我试图写一些jQuery来处理它，但我不知道它为什么不工作。即使是灰色的部分也不能显示......有没有人有任何建议呢？

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

Editted基于由@Dinesh建议： 的切换功能仅适用于点击一次得手......我怎么会改变它这样，这将是在切换每次点击？

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

Answer 1

您还没有加载jQuery和使用的$(this).find('.right').html("▼");代替$(this).find('.right').text("▼");

var flag = false; 
 
$('.view-detail').on('click',function(){ 
 
\t $('#table1 tr.show-history').toggle(); 
 
    if(flag == false){ 
 
    $(this).find('.right').html("▼"); 
 
    flag = true; 
 
    }else{ 
 
    $(this).find('.right').html("►"); 
 
    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>