<html>
<head>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.bs-example{
margin: 20px;
}
.accordion .fa{
margin-right: 0.5rem;
}
</style>
<script>
$(document).ready(function(){
// Add minus icon for collapse element which is open by default
$(".collapse.show").each(function(){
$(this).prev(".card-header").find(".fa").addClass("fa-minus-circle").removeClass("fa-plus-circle");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-plus-circle").addClass("fa-minus-circle");
}).on('hide.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-minus-circle").addClass("fa-plus-circle");
});
});
</script>
</head>
<body>
<div class="container bs-example"><!--main contain start-->
<div class="accordion greyboxshadow oneborder offset-md-0" style="border-radius: 3px;" id="accordionExample"><!--Full div where the bg color and border color given-->
<div class="card"><!--inside of that acordian start-->
<div class="grad-bg grad card-header" id="headingOne"><!--accordion heading div-->
<h2 class="mb-0">
<button type="button" class="btn-plus btn-link" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus-circle"></i> What is HTML?</button><!--accordion button and plus and minus icon added-->
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"><!--This div is show the expand after clicking plus sign-->
<div class="card-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>我在按钮上添加了一个“加号”。当用户点击按钮时，“加号”被“减号”替换并显示div内容
这是我的完整代码，以便您更好地理解
最佳答案
您可能只需要更改脚本的顺序，jQuery 需要包含在引导脚本之前。
旧代码:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
新代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
关于javascript - 我在按钮上添加了一个 "plus"标志。当用户点击按钮时， "plus"标志被替换为 "minus"标志并显示 div 内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58136190/