jQuery切换打开/关闭符号

如何在下面的代码中获得打开/关闭（即上/下箭头）以独立工作？现在，他们串通起来，这是误导。当我'打开'产品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/

来源

2012-02-28 stulk

更改此：

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

这样：

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

$(".expandProductDetails span")目标具有类expandProductDetails（每元素一个随后选择这些元素的子元素span。您希望将目标儿童span仅包含被点击的元素的元素，在您的点击事件中，该元素为this。

Updated example

来源

2012-02-28 21:56:06

jQuery切换打开/关闭符号

回答

相关问题