Question

如何在以下代码中单独使用打开/关闭（即上/下箭头）？现在，它们串联运作，这是误导性的。当我'打开'产品A时，它应该显示它所做的向上或向后箭头，但产品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>

工作（有点）示例：http://jsfiddle.net/stulk/mqjuR/

Answer 1

改变这个：

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

到此：

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

$(".expandProductDetails span")定位具有类expandProductDetails的每个元素（并随后选择这些元素的子span元素。您想要定位子{{} 1}}仅在点击事件的上下文中点击的元素的元素为span。

Updated example

jQuery切换打开/关闭符号

1 个答案: