Question

我正在尝试创建可扩展的常见问题解答页面。我在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

Answer 1

首先，display: hidden并非如此。我认为您正在寻找display:none。

jQuery的.next()函数仅查看兄弟姐妹，.content不是.faqlink的兄弟姐妹。您正在寻找.faqlink父母的兄弟姐妹。

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

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

使用Jquery的可扩展FAQ页面

1 个答案: