我编写了一个代码，在页面加载时，第1列中会出现加号和一些文本。当用户单击该列（带有+号）时，该行中的第二列将展开。此时，我想＆lt; +＆gt;标志应该 更改为＆lt; - ＆gt;。该列中的其余文本应保持不变。 同样，当用户再次单击第一列时，第二列会折叠，并且我希望 - 符号更改为+符号。
崩溃/扩展的代码工作正常。但是我无法将符号从+转换为 - 反之亦然。
有人可以帮帮我吗。
以下是代码：
<!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>
答案 0 :(得分：1)
$(document).ready(function(){
$(".xhide").hide();
$("tr.odd").click(function(){
$(this).find(".xhide").toggle(500);
var currentRow = $(this).find("#expand");
if(currentRow.hasClass('expanded')){
currentRow.html("+");
}
else{
currentRow.html("-");
}
currentRow.toggleClass('expanded');
});
});tr.even {
background-color: #FFFFFF;
}
tr.odd {
background-color: #EEEEEE;
}
.xhide
{
}<!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>
</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">+</span> Country</td>
<td>
<p>India</p>
<p visibility:hidden; 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">+</span> Country</td>
<td>
<p>India</p>
<p visibility:hidden; 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>
</html>
答案 1 :(得分：0)
编辑：实施了评论
$(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>
答案 2 :(得分：0)
Domenik的以下解决方案工作正常：
$(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>