我制作了 Accordion ，我不知道为什么我会看到其中没有任何 CSS 或 JavaScript 功能的纯文本。 我确保为级联样式表和 JavaScript 显示的链接正常工作。 稍后我的任务是在 mysql 中创建一个表并从那里导入数据，但首先我想解决这个问题，先生。我也没有收到任何我可以处理的错误。
这是我的代码
<?php
$arr_content = array(
array('title' => 'Section 1',
'content'=> 'Section 1 intro here'
),
array('title' => 'Section 2',
'content'=> 'Section 2 intro here'
),
array('title' => 'Section 3',
'content'=> 'Section 3 intro here'
),
);
?>
<html>
<head>
<title>Accordion</title>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap
/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap.css" />
<script src="bootstrap.js"></script>
</head>
<body>
<div class="panel-group" id="accordion" role="tablist" aria-
multiselectable="true">
<?php $i=1; foreach($arr_content as $acontent) { ?>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne <?php echo $i; ?
>">
<h4 class="panel-title">
<a <?php if($i>1) echo 'class="collapsed" ';?>
role="button" data-toggle="collapse" data-parent
="#accordion" href="#collapse<?php echo $i;
?>" aria-expanded ="<?php echo ($i==1) ? 'true'
:'false'; ?>true" aria-controls="collapse
<?php echo $i; ?>">
</a>
</h4>
</div>
<div id="collapse<?php echo $i; ?>" class="panel-collapse collapse <?
php
if($i==1) echo 'in';
?>" role="tabpanel" aria-labelledby="heading <?php echo $i; ?>">
<div class="panel-body">
<?php echo $acontent['content']; ?>
</div>
</div>
</div>
<?php $i++; } ?>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</div>
</body>
</html>
最佳答案
您包含了两次 bootstrap css，以及两次 js。我稍微清理了一下代码。希望这会有所帮助。
<?php
$arr_content = array(
array('title' => 'Section 1',
'content'=> 'Section 1 intro here'
),
array('title' => 'Section 2',
'content'=> 'Section 2 intro here'
),
array('title' => 'Section 3',
'content'=> 'Section 3 intro here'
),
);
?>
<html>
<head>
<title>Accordion</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="panel-group" id="accordion">
<?php $i=1; foreach($arr_content as $acontent) { ?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $i; ?>"><?php echo $acontent['title']; ?></a>
</h4>
</div>
<div id="collapse<?php echo $i; ?>" class="panel-collapse collapse <?php if($i === 1) { echo " in "; } ?>">
<div class="panel-body"><?php echo $acontent['content']; ?></div>
</div>
</div>
<?php $i++; } ?>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
关于javaScript 显示隐藏功能在显示从 phpMyAdmin 获取数据的 Accordion 时存在一些问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47383761/