我如何使每个查询折叠php
Posted
技术标签:
【中文标题】我如何使每个查询折叠php【英文标题】：how do i make each query collapse php 【发布时间】：2016-05-12 18:55:22 【问题描述】：我有这个 php 和 jQuery 代码，可以与我的数据库结合使用。这是唯一的页面。代码运行并给了我一行数据，但是当我单击折叠按钮时，它仅适用于第一行。即使我单击任何其他行，该操作也只会影响第一行并且所有其他行都会折叠，这是没有用的。
如何使所有行都能正常工作？就像按钮是双倍的，只适用于第一行。
<script>
$(function()
$('div#dl_box').on('show', function(e)
console.log('show', $(e.target).attr('class'), $(e.target).attr('id'));
$(e.target).prev('.accordion-heading').addClass('active');
);
$('div#dl_box').on('hidden', function(e)
console.log('hidden', $(e.target).attr('class'), $(e.target).attr('id'));
$(e.target).prev('.accordion-heading').removeClass('active');
);
);
$(document).ready(function() );
</script>
<?php
$connection = ($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost', 'root', ''));
((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE " . 'db'));
$query = "SELECT * FROM AS_Questions";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $query);
if (!$result)
printf("Errormessage: %s\n", $mysqli->error);
echo "<table>";
while($row = mysqli_fetch_array($result))
echo "
<section class='section swatch-white editable-swatch'>
<div class='container'>
<div class='panel panel-primary panel-ws-download'>
<div class='panel-heading'>
<a href='#group_accordion_stable' class='accordion-toggle collapsed' data-parent='#accordion_download' data-toggle='collapse'>
" . $row['Question'] . "
</a>
</div>
<div id='group_accordion_stable' class='panel-collapse collapse' style='height: 0px;'>
<div class='panel-body'>
<!-- first -->
<ul class='list-unstyled list-ws-download'>
<li>" . $row['Answer'] . "</li>
</ul>
</div>
</div>
</div>
</div>
</section>
"; //$row['index'] the index here is a field name
echo "</table>"; //Close the table in html
((is_null($___mysqli_res = mysqli_close($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res); //Make sure to close out the database connection
?>
【问题讨论】：
这是您页面上的完整代码吗？因为在您的js 部分中，您定位了 ID 为 dl_box 和类为 accordion-heading 的元素，但我在您的 html 部分中找不到它们？
【参考方案1】：
你的样本。
<!DOCTYPE html>
<html>
<head>
<style>
.default
display: block;
background: pink;
height: 3em;
width: 10em;
transition: height 5s, background 3s; /*collaspe speed*/
margin-top: 1em;
.expanded
height: 10em;
background: yellow;
transition: height 1s, background 2s; /*expand speed*/
/*display: none;*/
</style>
</head>
<body>
<?php
$i = 0;
while ($i <5)
$i++;
echo '<div class="default" id="ChangeThisId_'.$i.'">';
echo '
<a href="#"
name="ChangeThisId_'.$i.'"
onclick="changeHeight(this.name)">
Click me '. $i .'
</a>
';
echo '</div>';
// above return in html.
// <div class="default" id="ChangeThisId_1">
// <a href="#" name="ChangeThisId_1">CLick me 1</a>
// </div>
// <div class="default" id="ChangeThisId_2">
// <a href="#" name="ChangeThisId_2">Click me 2</a>
// and so on till ...5
?>
</body>
<script>
function changeHeight(x)
//alert(x); //x return name of clicked <a> tag.
document.getElementById(x).classList.toggle("expanded");
</script>
</html>
这是使用 css、html（+php 来创建行）和原生 javascript。 这个想法是为每一行分配一个唯一的。 其他的很不言自明，希望这会有所帮助。
【讨论】：
【参考方案2】：对于任何来这里搜索带有手风琴折叠的 sql 数据显示的人。这里 Qid 是我的表格自动递增的值。 AS_Questions 是我的表名。 db 是我的数据库名称。
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<?php
$connection = ($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost', 'root', 'password')); //The Blank string is the password
((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE " . 'db'));
$query = "SELECT * FROM AS_Questions";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $query);
if (!$result)
printf("Errormessage: %s\n", $mysqli->error);
echo "<table>";
while($row = mysqli_fetch_array($result))
echo "
<div class='panel-group' id='accordion'> <!-- accordion 1 -->
<div class='panel panel-primary'>
<div class='panel-heading'> <!-- panel-heading -->
<h4 class='panel-title'> <!-- title 1 -->
<a data-toggle='collapse' data-parent='#accordion' href='#accordion" . $row['Qid'] . "'>
" . $row['Question'] . " <i class='fa fa-eye' style='float: right;'></i>
</a>
</h4>
</div>
<!-- panel body -->
<div id='accordion" . $row['Qid'] . "' class='panel-collapse collapse'>
<div class='panel-body'>
" . $row['Answer'] . "
</div>
</div>
</div>
"; //$row['index'] the index here is a field name
echo "</table>"; //Close the table in HTML
((is_null($___mysqli_res = mysqli_close($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res); //Make sure to close out the database connection
?>
【讨论】：
【参考方案3】：<?php
$con = mysqli_connect("localhost", "root", "", "student_data")
?>
<!doctype html>
<html lang="en">
<head>
<title>Colapse</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<?php
$count = 0;
$fetch = mysqli_query($con, "SELECT * FROM student_cs");
if (mysqli_num_rows($fetch) > 0)
while ($record = mysqli_fetch_assoc($fetch))
$count++;
?>
<div class="col-4">
<p>
<button <?php $count; ?> class="btn btn-primary mt-3" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<h5> <?php echo $record['s_name']; ?> </h5>
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<h3> <?php echo $record['id']; ?> </h3>
<h4> <?php echo $record['s_name']; ?> </h4>
<h5> <?php echo $record['rollnumber']; ?> </h5>
<h6> <?php echo $record['class']; ?> </h6>
</div>
</div>
</div>
<?php
?>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。以上是关于我如何使每个查询折叠php的主要内容，如果未能解决你的问题，请参考以下文章