使用 Jquery 的可扩展常见问题解答页面答案

【问题标题】：Expandable FAQ page using Jquery使用 Jquery 的可扩展常见问题解答页面
【发布时间】：2017-11-22 05:39:31
【问题描述】：

我正在尝试创建一个可扩展的常见问题解答页面。我在 stackoverflow 上提到了几个有答案的线程，但是当我在我的代码中实现它时，我无法获得页面上问题的可扩展答案。

当我点击问题时，它没有显示任何变化

<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js">
</script>

<script>

<script type="text/javascript">
$(document).ready(function(){
    $('.faqlink').click(function(){
        $('.content').hide();
        $(this).parent('td').next('.content').show();
    });
});
</script>
<style type="text/css">
.content {
    display: none;
}
</style>
</head>
<body>

<table>
    <tr>
        <td>
            <a class="faqlink" href="#"><?php if ($result->num_rows > 0) {
            // output data of each row
            while($row = $result->fetch_assoc()) {
                echo "<h3><b>".$row["question"]." </b></h3>";
            }
        } else {
            echo "0 results";
        }
        ?></a>
        <br><br>
        </td>
        <td class="content">
            <?php if ($result->num_rows > 0) {
            // output data of each row
            while($row = $result->fetch_assoc()) {
                echo "<h3><b>".$row["answer"]." </b></h3>";
            }
        } else {
            echo "0 results";
        }
        ?>
        <br><br>
        </td>
    </tr>
</table>
</div>    
</body>
</html>

result

expected result

【问题讨论】：

这里的php代码没用。而是共享您的 HTML。当您询问内置toggle 的JQuery 时，为什么要使用style.display？
document.getElementById(id).style.display = 'block';
我参考了stackoverflow.com/a/2403217/8974868 的代码
我更新了问题中的代码

标签： javascript php jquery

【解决方案1】：

首先，display: hidden 不是一个东西。我想你正在寻找display:none。

jQuery 的.next() 函数只查看兄弟姐妹，而您的.content 不是.faqlink 的兄弟姐妹。相反，您正在寻找 .faqlink 的父级的兄弟姐妹。

$(this).parent('td').next('.content').show();

这将是处理它的幼稚方式，但通常在这种情况下，我更喜欢使用渲染内容的循环来为内容设置唯一 ID 并以这种方式引用它。使 javascript 更易于管理和阅读，并使查找速度更快。

【讨论】：

我刚刚注意到的其他东西，display: hidden 不是一个东西。您可能正在寻找的属性是display:none。这可能是问题所在，因为其他一切似乎都运行良好。 codepen.io/bhylton/pen/bYvLxQ
如果我不使用php从数据库中提取数据，它可以工作...我想提取存储在数据库中的问题和答案
你能用 PHP 运行后输出的 HTML 更新你的问题吗？
点击问题后，URL 会附加#