ページが読み込まれると、最初にプラス記号がテキストとともに列1に表示されるコードを作成しました。ユーザーがその列（+記号付き）をクリックすると、その行の2番目の列が展開されます。この時点で、<+>記号を<->に変更する必要があります。その列の残りのテキストは同じままである必要があります。同様に、ユーザーがその最初の列をもう一度クリックすると、2番目の列が折りたたまれ、-記号を+記号に変更する必要があります。
折りたたみ/拡張のコードは正常に機能しています。しかし、記号を+から-に、またはその逆に変換することはできません。
誰か助けてくれませんか。
以下はコードです：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="gwt:property" content="locale=en_US">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
tr.even {
background-color: #FFFFFF;
}
tr.odd {
background-color: #EEEEEE;
}
.xhide
{
}
</style>
</head>
<!-- comments only
-->
<body>
<hr>
<table>
<tbody>
<tr>
<td width="5%"></td>
<td><table border="1" cellpadding="5" cellspacing="0">
<thead>
<tr style="font-size:16px; background-color:lightgray;">
<th><a name="table"> </a>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td id = "x"><span id="expand"><b style="font-size:30px">+</b></span> Country</td>
<td>
<p>India</p>
<p class = "xhide" >Europe</p>
<p class = "xhide" >Asia</p>
<p class = "xhide" >Russia</p>
</td>
</tr>
<tr class="odd">
<td id = "x"><span id="expand"><b style="font-size:30px">+</b></span> Country</td>
<td>
<p>India</p>
<p class = "xhide" >Europe</p>
<p class = "xhide" >Asia</p>
<p class = "xhide" >Russia</p>
</td>
</tr>
</tbody>
</table></td>
<td width="5%"></td>
</tr>
</tbody>
</table>
</body>
<script>
$(document).ready(function(){
$(".xhide").hide();
$("#expand").click(function(){
$(".xhide").toggle(300);
if($("#expand").html() == "-"){
$("#expand").html("+");
}
else{
$("#expand").html("-");
};
$("#expand").css("style" , "font-size:30px");
});
});
</script>
</html>
編集：コメントを実装しました
$(document).ready(function(){
$(".xhide").hide();
$(".expand").click(function(){
if($(this).hasClass('expanded')) this.innerHTML= this.innerHTML.replace('-','+');
else this.innerHTML= this.innerHTML.replace('+','-');
$(this).parent('tr').find(".xhide").toggle(500);
$(this).toggleClass('expanded');
});
});tr.even {
background-color: #FFFFFF;
}
tr.odd {
background-color: #EEEEEE;
}
.expand b{
font-size:30px
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td width="5%"></td>
<td><table border="1" cellpadding="5" cellspacing="0">
<thead>
<tr style="font-size:16px; background-color:lightgray;">
<th><a name="table"> </a>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class = "expand"><b>+</b> Country</td>
<td>
<p>India</p>
<p class = "xhide" >Europe</p>
<p class = "xhide" >Asia</p>
<p class = "xhide" >Russia</p>
</td>
</tr><tr class="odd">
<td class = "expand"><b>+</b> Country</td>
<td>
<p>India</p>
<p class = "xhide" >Europe</p>
<p class = "xhide" >Asia</p>
<p class = "xhide" >Russia</p>
</td>
</tr> </tbody>
</table></td>
<td width="5%"></td>
</tr>
</tbody>
</table>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加