所以我现在几个小时都在苦苦挣扎。我终于让它工作，以便当我点击按钮时img和文本改变。但在尝试了一些事情之后，我注意到它并不像我想要的那样有效。
当我点击折叠按钮时，它会完美变化，也是我想要的。但是，当我打开另一个崩溃时，文本保持金色并且不会改变。
我希望它是这样的，当打开折叠时，上面的文字是金色，但当它关闭时，上面的文字会变回原来的颜色。
我怎样才能达到这样的效果？
$('button.btn.btn-link').click(function() {
var imgsrc = $(this).find('img').attr('src');
if (imgsrc == "http://i.imgur.com/xkGbQeg.png") {
$(this).addClass("goldtext");
$(this).find('img').attr("src", "http://i.imgur.com/Q3ickhr.png");
} else {
$(this).removeClass("goldtext");
$(this).find('img').attr("src", "http://i.imgur.com/xkGbQeg.png");
}
})<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Hello, world!</title>
<style>
#collapseimg {
width: 15px;
}
.goldtext {
color: #d6c095 !important;
}
</style>
</head>
<body>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<img id="collapseimg" src="http://i.imgur.com/xkGbQeg.png" />
Is het nodig een afspraak te maken?
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">
<img id="collapseimg" src="http://i.imgur.com/xkGbQeg.png" />
Is het nodig een afspraak te maken?
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="jquery-3.3.1.js"></script>
<script src="main.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
亲切的问候， Robbert
答案 0 :(得分：1)
我注意到，当你点击一个特定的按钮时你的功能会运行，但它会检查是否有另一个按钮打开。
我添加了一个var来保存已打开的元素。这个逻辑是下一个案例：
最后和重要的案例。元素1是开放的。单击元素二。这将关闭元素1并进入函数的if（true）部分。 Open将具有元素1值。因此，当它进入if部分时，它将遇到下一个if。
if（open！= null）{ open.removeClass（ “goldtext”）; }
代码不想正确使用farmat 并重置其字体颜色。
我希望我的代码可以帮到你。如果您需要更多帮助，我会很乐意帮助您。
//Var to save opened element
open = null;
$('button.btn.btn-link').click(function() {
var parent = $(this).parents()[2]
var child = parent.children[1];
var changer = child.classList.contains('show');
var imgsrc = $(this).find('img').attr('src');
if (!changer) {
if (open != null) {
open.removeClass("goldtext");
open.find('img').attr("src", "http://i.imgur.com/xkGbQeg.png");
}
$(this).addClass("goldtext");
$(this).find('img').attr("src", "http://i.imgur.com/Q3ickhr.png");
//Save clicked and opened element
open = $(this);
} else {
$(this).removeClass("goldtext");
$(this).find('img').attr("src", "http://i.imgur.com/xkGbQeg.png");
open = null;
}
})<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Hello, world!</title>
<style>
#collapseimg {
width: 15px;
}
.goldtext {
color: #d6c095 !important;
}
</style>
</head>
<body>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<img id="collapseimg" src="http://i.imgur.com/xkGbQeg.png" />
Is het nodig een afspraak te maken?
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">
<img id="collapseimg" src="http://i.imgur.com/xkGbQeg.png" />
Is het nodig een afspraak te maken?
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="jquery-3.3.1.js"></script>
<script src="main.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
编辑：更改某个选择器以获取面板的类列表。此类更改表单折叠以显示。 Cahnge if if验证类显示值。