jQuery切换打开/关闭符号_Jquery_Dynamic_Toggle

jQuery切换打开/关闭符号

jquery dynamic

jQuery切换打开/关闭符号,jquery,dynamic,toggle,Jquery,Dynamic,Toggle,如何使打开/关闭（即向上/向下箭头）在以下代码中独立工作？现在，它们协同运作，这是一种误导。当我“打开”产品A时，它会显示向上或关闭箭头，但产品B也会显示向上或关闭箭头，而产品B尚未“打开” <html> <head> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"&

如何使打开/关闭（即向上/向下箭头）在以下代码中独立工作？现在，它们协同运作，这是一种误导。当我“打开”产品A时，它会显示向上或关闭箭头，但产品B也会显示向上或关闭箭头，而产品B尚未“打开”

<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>


.产品详情{
显示：无；
}
产品理念Aliquam eu velit nibh。在eleifend convallis ante，坐着amet semper arcu lobortis vitae。
产品理念Nunc ac nisi vel leo iaculis feugiat。奎斯克·布兰迪特颞前庭。
$（'.expandProductDetails'）。单击（函数（）{
$（“.expandProductDetails span”）.toggle（）；
$（this）.closest（“tr”）.next（）.slideToggle（“slow”）；
});

工作（稍微）示例：

更改此选项：

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

为此：

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

$（“.expandProductDetails span”）

针对具有类的每个元素

expandProductDetails

（并随后选择这些元素的子

span

元素。您希望仅针对已单击元素的子

span

元素，在单击事件的上下文中，该子

元素是此