Question

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

Answer 1

查找单击标题的下一部分，如此。并更改您的课程ID，因为ID必须是唯一的

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

Answer 2

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

$(document).ready(function() {
	$('.header_background').click(function(e) {
		$(this).next('.section').slideToggle('slow');
		var img = $(this).find('img.expand_arrow')[0]; // the actual DOM element for the image
		if (img.src.indexOf('expand-arrow.png') != -1) {
			img.src  = 'images/collapse-arrow.png';
		}
		else {
		   img.src = 'images/expand-arrow.png';
		}
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_background" >
    <img class="expand_arrow" alt="" src="images/collapse-arrow.png">
    <div class="sub_header">header 1</div>
</div>
<div class="section" style="display:none">
    text 1
</div>

<div class="header_background" >
    <img class="expand_arrow" alt="" src="images/collapse-arrow.png">
    <div class="sub_header">header 2</div>
</div>
<div class="section" style="display:none">
    text 2
</div>

<div class="header_background" >
    <img class="expand_arrow" alt="" src="images/collapse-arrow.png">
    <div class="sub_header">header 3</div>
</div>
<div class="section" style="display:none">
    text 3
</div>

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

2 个答案: