0
オープン/クローズ（つまり上/下矢印）を次のコードで個別に機能させるにはどうすればよいですか？今、彼らは誤っているタンデムで動作します。私が「製品A」を開くと、その製品は上矢印または下矢印を表示しますが、「開かれていない」製品Bも表示されます。jQueryオープン/クローズシンボルの切り替え
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.productDetails {
display: none;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td><a href="#" class="expandProductDetails">Product A <span>↓</span><span style="display: none;">↑</span></a></td>
</tr>
<tr class="productDetails">
<td><strong>Product Philosophy</strong> Aliquam eu velit nibh. In eleifend convallis ante, sit amet semper arcu lobortis vitae.</td>
</tr>
<tr>
<td><a href="#" class="expandProductDetails">Product B <span>↓</span><span style="display: none;">↑</span></a></td>
</tr>
<tr class="productDetails">
<td><strong>Product Philosophy</strong> Nunc ac nisi vel leo iaculis feugiat. Quisque blandit tempor vestibulum.</td>
</tr>
</table>
<script>
$('.expandProductDetails').click(function() {
$(".expandProductDetails span").toggle();
$(this).closest("tr").next().slideToggle("slow");
});
</script>
</body>
</html>
ワーキング（やや）例：http://jsfiddle.net/stulk/mqjuR/