显示列表中的前5项，隐藏/切换其他项的显示（PHP）

我想在一个列表中显示前5个名称，并将任何其他名称的显示切换为单个块

目前，我已将名称列表作为数组对象，但如果解决方案更简单，我很乐意将其更改为数组

到目前为止，我所拥有的是*完整的，因为我不知道如何创建名称的隐藏div：

PHP

要隐藏

，请执行以下操作：

然后jQuery应该使用.toggle（）命令使其可见。

要使

隐藏：

然后jQuery应该使用.toggle（）命令使其可见。

PHP

$names_count = 0;
echo '<div id="nameList" class="toggler">';
foreach($names as $name) {
    echo '<a id="name' . $name->acct_id . '">' . $name->full_name . '</a>';
    if ($names_count == 4) {
        echo '</div><div class="hidden">';
    }
    $names_count++;
} 
echo '</div>';

CSS

PHP

CSS

---

下面是一个带有两个

while

循环的示例

$names = array('Bob', 'Andy', 'Tim', 'Max', 'Roger', 'John', 'Test');
$nameCount = count($names);
$nameIndex = 0;

echo '<div id="nameList" class="toggler">'; 

// Show the first 5 names.
while ($nameIndex < min(5, $nameCount)) {
    $name = $names[$nameIndex++];
    echo '<a id="name' . $name . '">' . $name . '</a>';
}

// Show the remaining names in a hidden div.
if ($nameIndex < $nameCount)
{       
    echo '<div class="hiddenNames" style="display:none">';
    while ($nameIndex < $nameCount) {
        $name = $names[$nameIndex++];
        echo '<a id="name' . $name . '">' . $name . '</a>';
    }
    echo '</div>';     
}

echo "</div>";  

即使代码更大，我发现它更容易遵循，而且从长远来看可能更容易维护。（意见）

---

希望这有帮助

下面是一个带有两个

while

循环的示例

$names = array('Bob', 'Andy', 'Tim', 'Max', 'Roger', 'John', 'Test');
$nameCount = count($names);
$nameIndex = 0;

echo '<div id="nameList" class="toggler">'; 

// Show the first 5 names.
while ($nameIndex < min(5, $nameCount)) {
    $name = $names[$nameIndex++];
    echo '<a id="name' . $name . '">' . $name . '</a>';
}

// Show the remaining names in a hidden div.
if ($nameIndex < $nameCount)
{       
    echo '<div class="hiddenNames" style="display:none">';
    while ($nameIndex < $nameCount) {
        $name = $names[$nameIndex++];
        echo '<a id="name' . $name . '">' . $name . '</a>';
    }
    echo '</div>';     
}

echo "</div>";  

即使代码更大，我发现它更容易遵循，而且从长远来看可能更容易维护。（意见）

---

---

希望这有帮助

这是一个与PHP无关的客户端问题。请显示您的HTML输出，而不是服务器端代码。@等等什么？我想用PHP进行计数。你能做的就是将它们全部输出，隐藏，然后在客户端上使用JS公开你想要的，并提供一个链接来切换其余的。这不是

this.toggle（）

而不是

$（'#'+id）。切换

？谢谢，但我更愿意保持JS使用最小化这是一个与PHP无关的客户端问题。请显示您的HTML输出，而不是服务器端代码。@等等什么？我想用PHP进行计数。你能做的就是将它们全部输出，隐藏，然后在客户端上使用JS公开你想要的，并提供一个链接来切换其余的。这不是

this.toggle（）

而不是

$（'#'+id）.切换
？谢谢，但我更愿意让JS使用量最小化-@Loo谢谢，但这不是JS或CSS问题，而是PHP问题。-@Loo谢谢，但这不是JS或CSS问题，而是PHP问题。这应该行得通。我建议使用2个
while
循环（0到min（4，N）和5到N），而不是单个
foreach
。在我看来，这将使HTML结构在PHP代码中更具可读性。-@Upper不应该是
$（this）.children（）或$（this）.find（'.hidden'）
而不是
$（this）.next（）
？@MaximeMorin，听起来很有趣，你介意向上展示一些代码吗？@Timperson对你的问题，不介意。如果你看清楚，他正在关闭切换div并启动隐藏div。隐藏div实际上是结构中的下一个div。这有点证明了我关于可读性的观点。。。对于您向我提出的问题，当然，我会为您写下一些内容。@Timperson，.next（）用于获取匹配元素集中每个元素紧跟其后的同级。这应该会起作用。我建议使用2个
while
循环（0到min（4，N）和5到N），而不是单个
foreach
。在我看来，这将使HTML结构在PHP代码中更具可读性。-@Upper不应该是
$（this）.children（）或$（this）.find（'.hidden'）
而不是
$（this）.next（）
？@MaximeMorin，听起来很有趣，你介意向上展示一些代码吗？@Timperson对你的问题，不介意。如果你看清楚，他正在关闭切换div并启动隐藏div。隐藏div实际上是结构中的下一个div。这有点证明了我关于可读性的观点。。。当然，对于你向我提出的问题，我会为你写一些东西。@Timperson，.next（）用于获取匹配元素集中每个元素紧跟其后的同级。-@Maxime感谢我的
$names
实际上是一个多维数组对象，因此与向上解决方案不同，我很难将您的解决方案调整到我的特定问题。不管怎样，谢谢你的努力和出色的工作，我学到了一些新东西！也许有些东西我没看到，但应该不会更难。从我在你的问题中看到的，你只需要替换这些行
echo'$名字按您的原始行
回显“帐户id”。$name->全名。“。它应该是开箱即用的。我只是不想创建一个对象数组。不过，如果你能找到解决问题的办法，我很高兴。：）-@Maxime感谢我的
$names
实际上是一个多维数组对象，因此与-@向上解决方案不同，我很难使您的解决方案适应我的特定问题。不管怎样，谢谢你的努力和出色的工作，我学到了一些新东西！也许有些东西我没看到，但应该不会更难。从我在你的问题中看到的，你只需要替换这些行
echo'$名字按您的原始行
回显“帐户id”。$name->全名。“。它应该是开箱即用的。我只是不想创建一个对象数组。不过，如果你能找到解决问题的办法，我很高兴。：）
$('.toggler').click(function(){
   $(this).next().toggle();
});

.hidden {
    display: none;
}

$names = array('Bob', 'Andy', 'Tim', 'Max', 'Roger', 'John', 'Test');
$nameCount = count($names);
$nameIndex = 0;

echo '<div id="nameList" class="toggler">'; 

// Show the first 5 names.
while ($nameIndex < min(5, $nameCount)) {
    $name = $names[$nameIndex++];
    echo '<a id="name' . $name . '">' . $name . '</a>';
}

// Show the remaining names in a hidden div.
if ($nameIndex < $nameCount)
{       
    echo '<div class="hiddenNames" style="display:none">';
    while ($nameIndex < $nameCount) {
        $name = $names[$nameIndex++];
        echo '<a id="name' . $name . '">' . $name . '</a>';
    }
    echo '</div>';     
}

echo "</div>";  

<div id="nameList" class="toggler">
    <a id="nameBob">Bob</a>
    <a id="nameAndy">Andy</a>
    <a id="nameTim">Tim</a>
    <a id="nameMax">Max</a>
    <a id="nameRoger">Roger</a>
    <div class="hiddenNames" style="display:none">
        <a id="nameJohn">John</a>
        <a id="nameTest">Test</a>
    </div>
</div>

<div id="nameList" class="toggler">
    <a id="nameBob">Bob</a>
    <a id="nameAndy">Andy</a>
    <a id="nameTim">Tim</a>
</div>

$('.toggler').click(function(){
   $('.hiddenNames').toggle();
});