我对Javascript很新，所以如果这看起来像一个简单的问题，请原谅我。
我正在尝试在两个按钮之间执行简单的切换功能，使用Javascript滑动我想要上下显示的内容。不幸的是，效果仅适用于我的表格中显示的第一行数据。
有人能发现我需要做些什么来使这个功能适用于每个表行吗？
这是我的JSFiddle的链接： JSFiddle Link
这是我的代码：
$(function() {
$("td[colspan=9]").find("p").hide();
$("#less").hide();
$("#more").click(function(event) {
event.stopPropagation();
var $target = $(event.target);
if ($target.closest("td").attr("colspan") > 1) {
$target.slideDown();
$("#less").show();
$("#more").hide();
} else {
$target.closest("tr").next().find("p").slideDown();
$("#less").show();
$("#more").hide();
}
});
$("#less").click(function(event) {
event.stopPropagation();
var $target = $(event.target);
if ($target.closest("td").attr("colspan") > 1) {
$target.slideUp();
$("#more").show();
$("#less").hide();
} else {
$target.closest("tr").next().find("p").slideUp();
$("#more").show();
$("#less").hide();
}
});
});table {
width: 75%;
}
tr {
border: 2px solid #AEAEAE;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<p>Name</p>
</td>
<td>
<p>Age</p>
</td>
<td>
<p>Info</p>
</td>
<td>
<button id=more>+</button>
<button id=less>-</button>
</td>
</tr>
<tr>
<td colspan="3">
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td>
</tr>
<tr>
<td>
<p>Name</p>
</td>
<td>
<p>Age</p>
</td>
<td>
<p>Info</p>
</td>
<td>
<button id=more>+</button>
<button id=less>-</button>
</td>
</tr>
<tr>
<td colspan="3">
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td>
</tr>
<tr>
<td>
<p>Name</p>
</td>
<td>
<p>Age</p>
</td>
<td>
<p>Info</p>
</td>
<td>
<button id=more>+</button>
<button id=less>-</button>
</td>
</tr>
<tr>
<td colspan="3">
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td>
</tr>
</table>
感谢您提前寻求帮助。
答案 0 :(得分：2)
您的代码段中几乎没有问题。
1：重复的id元素越来越少
2：你在这些重复的id选择器上绑定了click事件，这使得滑动/向下滑动的整个逻辑错误
请尝试以下代码。
我已将重复的ID更改为类并进行了一些更改以向上滑动。向下滑动并显示更多/更少的逻辑。
$(function() {
$("td[colspan=9]").find("p").hide();
$(".more").hide();
$(document).on("click",".more", function(event) {
event.stopPropagation();
var $target = $(event.target);
if ($target.closest("td").attr("colspan") > 1) {
$target.slideDown();
$target.next(".less").show();
$target.hide();
} else {
$target.closest("tr").next().find("p").slideDown();
$target.next(".less").show();
$target.hide();
}
});
$(document).on("click",".less", function(event) {
event.stopPropagation();
var $target = $(event.target);
if ($target.closest("td").attr("colspan") > 1) {
$target.slideUp();
$target.prev(".more").show();
$target.hide();
} else {
$target.closest("tr").next().find("p").slideUp();
$target.prev(".more").show();
$target.hide();
}
});
});table {
width: 75%;
}
tr {
border: 2px solid #AEAEAE;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<p>Name</p>
</td>
<td>
<p>Age</p>
</td>
<td>
<p>Info</p>
</td>
<td>
<button class=more>+</button>
<button class=less>-</button>
</td>
</tr>
<tr>
<td colspan="3">
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td>
</tr>
<tr>
<td>
<p>Name</p>
</td>
<td>
<p>Age</p>
</td>
<td>
<p>Info</p>
</td>
<td>
<button class=more>+</button>
<button class=less>-</button>
</td>
</tr>
<tr>
<td colspan="3">
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td>
</tr>
<tr>
<td>
<p>Name</p>
</td>
<td>
<p>Age</p>
</td>
<td>
<p>Info</p>
</td>
<td>
<button class=more>+</button>
<button class=less>-</button>
</td>
</tr>
<tr>
<td colspan="3">
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td>
</tr>
</table>