PHP MySQL结果显示/隐藏异常：点击加载更多仅显示一行

嘿，我帮你找到了问题的根源，咱们一步步来搞定这个「加载更多只显示一行」的问题！

问题出在哪？ #

你的代码有两个核心问题：

1. 重复的唯一ID：在PHP循环里，每一行超过3条时都会生成一个<div id="myDIV_Filter1_1">，但HTML规定ID必须是页面唯一的，所以最后只有最后一条超出的记录被绑定到这个ID上，其他的都没被正确包含进隐藏容器。
2. 容器包裹逻辑错误：你把隐藏容器的闭合标签</div>放在了循环外面，导致只有最后一条超出3行的记录被包裹，前面的额外记录根本没被放进隐藏区域里。

修复后的完整代码 #

<?php
// 注意：mysql扩展已废弃，建议替换为mysqli或PDO
$query_brands = mysql_query("SELECT distinct pd_filter1 from tbl_brands2 WHERE pd_code in (select pd_code from tbl_product where cat_id='2')") or die(mysql_error());
$count_brands = mysql_num_rows($query_brands);
$record_brands = [];
if($count_brands > 0) {
    while($fetch_brands = mysql_fetch_array($query_brands)) {
        $record_brands[] = $fetch_brands;
    }
}
$i_brands = 0;
$show_more_needed = $count_brands > 3; // 判断是否需要显示加载更多按钮
?>
<table border="1" width="215" style="border-collapse: collapse; border-spacing: 0;" bgcolor="#eeeff0">
<tr>
<td>
<?php foreach($record_brands as $records_brands): 
    $i_brands++;
    // 前3条直接显示
    if ($i_brands <= 3): ?>
        <div><?php echo $records_brands['pd_filter1']; ?></div>
    <?php else: 
        // 第4条开始，只在第一次时输出隐藏容器的开始标签
        if ($i_brands === 4): ?>
            <div id="myDIV_Filter1_1" style="display:none;">
        <?php endif; ?>
        <div><?php echo $records_brands['pd_filter1']; ?></div>
    <?php endif; ?>
<?php endforeach; ?>
<?php // 如果有超出3条的记录，闭合隐藏容器 ?>
<?php if($show_more_needed): ?>
    </div>
<?php endif; ?>

<?php // 只有需要加载更多时才显示按钮 ?>
<?php if($show_more_needed): ?>
    <div id="myDIV_Filter1_2">
        <span class="class22">
            <a href="#" onclick="myFunction();return false;">show more...</a>
        </span>
    </div>
    <div id="myDIV_Filter1_3" style="display:none;">
        <span class="class22">
            <a href="#" onclick="myFunction();return false;">show less...</a>
        </span>
    </div>
<?php endif; ?>
</td>
</tr>
</table>

<script>
function myFunction() {
    var x_filter1_1 = document.getElementById("myDIV_Filter1_1");
    var x_filter1_2 = document.getElementById("myDIV_Filter1_2");
    var x_filter1_3 = document.getElementById("myDIV_Filter1_3");
    if (x_filter1_1.style.display === "none") {
        x_filter1_1.style.display = "block";
        x_filter1_2.style.display = "none";
        x_filter1_3.style.display = "block";
    } else {
        x_filter1_1.style.display = "none";
        x_filter1_2.style.display = "block";
        x_filter1_3.style.display = "none";
    }
}
</script>

关键修改点说明 #

• 容器逻辑优化：现在只有当循环到第4条记录时，才会创建隐藏容器的开始标签，所有超出3条的记录都会被包裹在同一个容器里，避免了重复ID和错误包裹的问题。
• 按需显示按钮：只有当总记录数超过3条时，才会渲染「show more/less」按钮，避免无意义的按钮显示。
• 清晰的结构拆分：把每条记录的显示逻辑拆分开，前3条直接显示，后续统一放进隐藏容器，逻辑更清晰。

额外提醒 #

另外要注意：mysql_*系列函数已经在PHP 5.5.0中被废弃，并且在PHP 7.0.0中被移除了，建议你尽快替换为mysqli或PDO扩展，避免后续版本兼容性问题。

内容的提问来源于stack exchange，提问作者perastikos1