我如何在 JQuery 中制作一个 Accordion ，使用 PHP 显示来 self 的 mysql 数据库的数据。所以我希望它按字母顺序显示数据，如下所示:
...因此，在用户单击“A”之前，它不会显示数据，b 等也是如此。
到目前为止我有这个:
使用 这不在 Accordion 中。有人可以帮我开始做这件事吗？我们将不胜感激。
[代码]
<div id="accordion">
<font face="Calibri" style="italic" size='10px' color="white">
<?php
mysql_connect("host","user","pass!") or die("Could not connect to localhost");
mysql_select_db("db") or die( "Could not connect to database");
?>
<?php
$result = mysql_query("SELECT * FROM table ORDER BY name ASC");
echo "<div class='scroll'>";
while ($row = mysql_fetch_array($result))
{
echo "<div style='margin: 0 auto;'>
<span style='display:inline-block; width:200px; text-align:left;'>" . ucwords($row['name']) . "</span>
<span style='display:inline-block; text-align:left;'>" . ucwords($row['number']) . "</span>
</div>
<br>";
}
echo "</div>";
?>
</div>
最佳答案
你可以做这样的事情。
$names = ['alex', 'adam', 'bob', 'bryan'];
asort($names); // The list wasn't sorted, if you don't want sorting you can just remove this line.
// Prepare list for accordion.
$accordionData = [];
foreach($names as $name) {
$accordionData[substr($name, 0, 1)][] = $name;
}
// Print accordion, change the echoes to reflect your accordion html.
foreach($accordionData as $index => $names) {
echo strtoupper($index).'<br />';
foreach($names as $name) {
echo ucfirst($name).'<br />'; // ucfirst changes the first letter to upper case.
}
}
输出:
A
Adam
Alex
B
Bob
Bryan
如果您的问题包括如何制作实际的 Accordion ，只需尝试此处提供的代码: http://jqueryui.com/accordion/
这是一个基于 jquery ui 的工作示例
// You should replace this with your DB data.
$names = ['alex', 'adam', 'bob', 'bryan'];
// The list wasn't sorted, if you don't want sorting you can just remove this line.
asort($names);
// Prepare list for accordion.
$accordionData = [];
foreach($names as $name) {
$accordionData[substr($name, 0, 1)][] = $name;
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Collapse content</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
active: false
});
});
</script>
</head>
<body>
<div id="accordion">
<?php
// Print accordion, change the echoes to reflect your accordion html.
foreach($accordionData as $index => $names) {
?>
<h3><?php echo strtoupper($index); ?></h3>
<div>
<?php
foreach($names as $name) {
?>
<p><?php echo ucfirst($name); ?></p>
<?php
}
?>
</div>
<?php
}
?>
</div>
关于php - 如何在 Jquery 中制作一个 Accordion ，用 PHP 显示 MySQL 数据库中的数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17126117/