Question

我正在使用此代码进行常见问题解答。你单击img然后打开框，单击img也会关闭框。 img会在每次点击时切换。到目前为止，我还没有能够将其转换为超过1个部分。我对jquery或javascript一无所知，但了解一些编程概念。我已经尝试了4个小时而没有运气。我需要你的帮助！

$(document).ready(function() {
$('#expandcontract').toggle(
function(){ // you can add as much here as you'd like
$('#box').show('slow');
$('#imgArrows').attr("src","images/up.png");
}, function() { // same here
$('#box').hide('slow');
$('#imgArrows').attr("src","images/down.png");
});
});

Answer 1

将所有Id更改为类后，您可能需要这样的内容：

$(document).ready(function() {
    $('.expandcontract').toggle(
        function() {
            $('.box',this).show('slow');
            $('.imgArrows',this).attr("src","images/up.png");
        }, function() {
            $('.box',this).hide('slow');
            $('.imgArrows',this).attr("src","images/down.png");
        }
    );
});

假设您的HTML类似于：

<div class="expandcontract">
    <div class="box" />
    <div class="imgArrows" />
</div>
<div class="expandcontract">
    <div class="box" />
    <div class="imgArrows" />
</div>
<div class="expandcontract">
    <div class="box" />
    <div class="imgArrows" />
</div>

Answer 2

ID只应提供给一个元素。您需要分配元素类，然后使用适当的类检索所有元素，并为它们添加切换处理程序。

这可以转换为多个（20+）实例吗？

2 个答案: