Javascript 如何使用更改箭头使多个div滑动切换

我对javascript和jQuery非常陌生，尽管尝试了各种选项，但现在已经完全卡住了。我正在尝试创建一个包含多个div的展开/折叠部分。我希望每个div分别打开和关闭，旁边有一个向上或向下的箭头，这取决于内容是展开还是折叠

根据我在下面编写的代码，只有第一个div工作正常。当您单击另外两个div时，唯一发生的事情是第一个div中的箭头发生了变化

任何帮助都将不胜感激

以下是CSS：

#header_background {
background-image: url(header-background.png);
width:748px;
height:43px;
margin-left: -17px;}

#expand_arrow {
display: inline-block;
width: 17px;
height: 18px;
float:left;
margin-left:20px;
padding-left:0px;
padding-top:11px;
background-repeat:no-repeat; }  

.sub_header {
color:#204187;
font-weight:bold;
font-size:16px;
vertical-align:middle;
padding-left:4px;
padding-top:12px;
float:left;
text-decoration:none;
 }

下面是尝试使用的javascript和jQuery：

function chngimg() {
    var img = document.getElementById('expand_arrow').src;
    if (img.indexOf('expand-arrow.png')!=-1) {
        document.getElementById('expand_arrow').src  = 'images/collapse-arrow.png';
    }
     else {
       document.getElementById('expand_arrow').src = 'images/expand-arrow.png';
   }
}


$(document).ready(function(){
  $("#header_background").click(function(){
    $("#section").slideToggle("slow");
  });
});

这是HTML

<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 1</div>
</div>
<div id="section" style="display:none">
text 1
</div>

<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 2</div>
</div>
<div id="section" style="display:none">
text 2
</div>

<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 3</div>
</div>
<div id="section" style="display:none">
text 3
</div>

标题1
文本1
标题2
文本2
标题3
文本3

像这样单击标题，查找标题的下一部分。并更改类的id，因为id必须是唯一的

$(".header_background").click(function(){
    $(this).nextAll(".section:first").slideToggle("slow");
});

---

它只适用于第一组元素，因为您使用的是ID，并且ID在文档（第页）中必须是唯一的。您可以改为使用类并执行一些简单的DOM遍历，以根据单击的标题获取相应的部分。大概是这样的：

$（文档）.ready（函数（）{
$（'.header_background'）。单击（函数（e）{
$（this）.next（'.section'）.slideToggle（'slow'）；
var img=$（this.find（'img.expand_arrow'）[0]；//图像的实际DOM元素
if（img.src.indexOf（'expand-arrow.png'）！=-1）{
img.src='images/collapse arrow.png'；
}
否则{
img.src='images/expand arrow.png'；
}
});
});

标题1
文本1
标题2
文本2
标题3
文本3
只有第一个有效，因为您使用的是ID，并且ID必须是唯一的（即页面上只有一个元素可以有给定的ID）。嗨，米莉，欢迎使用堆栈溢出。如果您在jsfiddle.net上发布一个工作示例，这样人们就可以对它进行调试，那么您将在这方面获得更多帮助。谢谢您的反馈。在过去的几年里，我经常使用Stack Overflow来查看其他人的问题和答案，但今天我刚刚注册。这是一个神奇的地方。这个代码运行得非常好。谢谢，非常感谢！关于这次新的冒险，我有很多东西要学。