javascript - 当我使用 JQuery 切换时，脚本只最小化迭代器中的第一个值？

Question

When I am running the following code on my server when I click on both the options it only minimises and maximises the first value within my iterated list. How do I get all of the values in my iterated list to be minimised and maximised all at once?

<h2 id="Group" style="color:#2E9AFE">Group Name</h2>

                      <s:iterator
                        value="#session.test" var="test">

<div>

    <p id="GN"> <s:property value="%{#test.groupName}"/> </p>
</div>
</s:iterator>

<h2 id="Environment" style="color:#2E9AFE">Environment</h2>

 <s:iterator
                        value="#session.test" var="test">



    <p id="ENV"> <s:property value="%{#test.environment}"/></p>

</s:iterator>
</jsp:attribute>
</h:page>



<script>
$(document).ready(function(){


$("#Group").click(function(){
    var $target = $('#GN'),
    $toggle = $(this);
    $target.slideToggle( 500, function () {
        $toggle.text(($target.is(':visible') ? 'Group' : 'Group') + ' Name');
        });
});
});

</script>
<script>
$(document).ready(function(){


$("#Environment").click(function(){
    var $target = $('#ENV'),
    $toggle = $(this);
    $target.slideToggle( 500, function () {
        $toggle.text(($target.is(':visible') ? 'Environment' : 'Environment'));
        });
});
});

</script>

Answer 1

您不能按 ID 选择多个元素。 ID 是唯一的，如果你违反了这个规则，jQuery 将获得第一个匹配的元素。改用类。