我正在尝试使用 jQuery Mobile Collapsibles 创建一个包含可折叠内容的网页。我指的是this 。我想将 $row['Host'] 显示为标题，将 $row['IP'] 显示为内容。我的脚本没有显示任何内容？我哪里错了？
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
</body>
</html>
<?php
$con = mysql_connect("127.0.0.1", "root", "pass");
if (!$con) {
die("Error: " . mysql_error());
}
mysql_select_db("mydb", $con);
$result = mysql_query("SELECT * FROM mytbl");
?>
<?php
// display the results returned
while ($row = mysql_fetch_array($result)) {
?>
<div data-role="collapsible" data-collapsed="true">
<h3><?=$row['Host']?></h3>
<p><?=$row['IP']?><p>
</div>
<?php } ?>
最佳答案
您的 HTML 中有错误。
基本上，您是在 HTML 标记关闭后导出数据库数据:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
</body>
</html>
YOUR PHP CODE IS HERE
将其更改为:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<?php
$con = mysql_connect("127.0.0.1", "root", "pass");
if (!$con) {
die("Error: " . mysql_error());
}
mysql_select_db("mydb", $con);
$result = mysql_query("SELECT * FROM mytbl");
?>
<?php
// display the results returned
while ($row = mysql_fetch_array($result)) {
?>
<div data-role="collapsible" data-collapsed="true">
<h3><?=$row['Host']?></h3>
<p><?=$row['IP']?><p>
</div>
<?php } ?>
</body>
</html>
关于javascript - 带有数据库的 jQuery Mobile 可折叠项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24058001/