Javascript 引导accordion数据父级不使用ajax调用
您可以在下面看到我的错误示例 第一个脚本是创建十个折叠的简单循环。为了不使页面过载，我们将对collapse的clic执行一个ajax调用。ajax调用传递一个参数，即折叠的ID。当我们在第二个折叠的级别上进行clic时，数据父级并非始终有效 我希望我的第二个折叠的级别有一个正常的行为，这意味着一次只扩展一个div 我不确定，但我认为我的错误来自ajax调用，它在每个clic上重新加载数据父对象 你能帮我吗Javascript 引导accordion数据父级不使用ajax调用,javascript,php,html,css,Javascript,Php,Html,Css,您可以在下面看到我的错误示例 第一个脚本是创建十个折叠的简单循环。为了不使页面过载，我们将对collapse的clic执行一个ajax调用。ajax调用传递一个参数，即折叠的ID。当我们在第二个折叠的级别上进行clic时，数据父级并非始终有效 我希望我的第二个折叠的级别有一个正常的行为，这意味着一次只扩展一个div 我不确定，但我认为我的错误来自ajax调用，它在每个clic上重新加载数据父对象 你能帮我吗 **FRONT END SCRIPT** <!DOCTYPE html>
**FRONT END SCRIPT**
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</head>
<body>
<?php
echo "<div id='accordion'>";
for ($i = 1; $i <= 10; $i++) {
echo "<div class='card'>";
echo "<div class='card-header' id='heading-" . $i . "'>";
echo "<h5 class='mb-0'>";
echo "<button class='btn btn-link' data-toggle='collapse' data-target='#collapse-" . $i . "' aria-expanded='false' aria-controls='collapse-" . $i . "''>";
echo "Collapsible Group Item #" . $i;
echo "</button>";
echo "</h5>";
echo "</div>";
echo "<div id='collapse-" . $i . "' class='collapse' aria-labelledby='heading-" . $i . "' data-parent='#accordion'>";
echo "<div class='card-body'>";
echo "</div>";
echo "</div>";
echo "</div>";
}
echo "</div>";
?>
<script>
$(function() {
$(".collapse").on('show.bs.collapse', function(e) {
if ($(this).is(e.target)) {
var target = (this.id);
var id = target.replace("collapse-", "");
$.ajax({
type: "GET",
url: "test_backend.php",
data: {
id: id
},
async: false,
success: function(response) {
$('#collapse-' + id).html(response);
},
error: function(response, error) { // Info Debuggage si erreur
alert("Erreur : responseText: " + response.responseText);
},
});
}
})
});
</script>
</body>
</html>
BACK END SCRIPT
<?php
if(isset($_GET['id'])){
echo "<div class='card-body'>";
echo "<div id='accordion-1'>";
echo "<div class='card'>";
echo "<div class='card-header' id='heading-1-1'>";
echo "<h5 class='mb-0'>";
echo "<button class='btn btn-link' data-toggle='collapse' data-target='#collapse-1-1' aria-expanded='false' aria-controls='collapse-1-1'>";
echo "Collapsible Group Item #" . $_GET['id'] . " > #1";
echo "</button>";
echo "</h5>";
echo "</div>";
echo "<div id='collapse-1-1' class='collapse' aria-labelledby='heading-1-1' data-parent='#accordion-1'>";
echo "<div class='card-body'>";
echo "item " . $_GET['id'] . " > 1";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div class='card'>";
echo "<div class='card-header' id='heading-1-2'>";
echo "<h5 class='mb-0'>";
echo "<button class='btn btn-link' data-toggle='collapse' data-target='#collapse-1-2' aria-expanded='false' aria-controls='collapse-1-2'>";
echo "Collapsible Group Item #" . $_GET['id'] . " > #2";
echo "</button>";
echo "</h5>";
echo "</div>";
echo "<div id='collapse-1-2' class='collapse' aria-labelledby='heading-1-2' data-parent='#accordion-1'>";
echo "<div class='card-body'>";
echo "item " . $_GET['id'] . " > 2";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
}
?>
**前端脚本**
页面标题
怎么了？看看这里一切都很好。。。请您在“可折叠组项目1>可折叠组项目1”和“可折叠组项目1>可折叠组项目2”上对不同的可折叠组项目进行clic。数据父级在第二级访问中无法正常工作，请再次查看我认为它正在工作…这是相同的行为。。。看我的帖子，我添加了这个问题的图片。。提前感谢您的时间