2012-02-28 23 views
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>&darr;</span><span style="display: none;">&uarr;</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>&darr;</span><span style="display: none;">&uarr;</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/

答えて

1

変更この:これに

$(".expandProductDetails span").toggle(); 

$(this).children('span').toggle(); 

$(".expandProductDetails span")ターゲットクラスexpandProductDetailsを(持っているすべての要素aその後、これらの要素の子要素spanが選択されます。クリックイベントのコンテキストでthisである、クリックされた要素のみの子要素spanをターゲットにしたいとします。

Updated example