Question

我有一个包含50个值的数组，我想只显示其中的前5个值并提供“read more”链接。当用户单击该链接时，将显示其余值。

代码：

<?php
foreach($abc as $ac) {
    //print_r($ac);
    echo '<li><a class="abc" id="'.$ac->Id.'" href="#">'.$ac->Name.'</a></li>';
}?>

<a href="#" >More<i class="fa fa-caret-down" aria-hidden="true"></i></a></li>

如何在循环中完成？

Answer 1

为了在不重新加载页面的情况下显示同一页面中的其余值，导航到另一个页面或异步加载（例如使用AJAX），看似唯一合理的方法是使用JavaScript和CSS。

一种方法是添加CSS类以隐藏以5 ^th元素开头的项目，然后当用户单击 More 链接时，将添加一个类list元素（例如<ul>，<ol>），这样CSS规则就会显示隐藏的列表项。

首先，像这样添加CSS：

#linksList li.hidden {
    display: none;
}
#linksList.expanded li {
    display: list-item;
}

请注意，这些选择器适用于具有id属性＆＃34; linksList＆＃34;的元素下的列表项。如果已经没有id，则将foreach值添加到列表项的父元素中。（例如<ul id="linksList">）。

然后在迭代列表项时，使用关联样式id（即foreach (array_expression as $key => $value)）。然后检查索引是否大于4，如果是，则将类名添加到列表项标记（即<li>）。

<ul id="linksList">
<?php
foreach($abc as $index => $ac){
    $class = '';
    if ($index > 4) {
        $class = 'class="hidden"';
    }
    echo '<li '.$class.'><a class="abc" id="'.$ac->Id.'" href="#">'.$ac->Name.'</a></li>';
}

然后我们需要一种方法来检测用户何时点击标有更多的链接。我建议添加document.addEventListener属性：

<a id="showMore" href="#" >More<i class="fa fa-caret-down" aria-hidden="true"></i></a></li>

对于Javascript，我们可以添加带有DOMContentLoaded的事件监听器，以确保在访问DOM内容（使用this PHP playground example事件）之前DOM已准备就绪，然后监听点击。如果用户点击了标有 showMore 的链接，那么我们将扩展类添加到列表标记中：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.addEventListener('click', function(clickEvent) {
            if (clickEvent.target.id == 'showMore') {
                linksList.classList.add('expanded');
            }
        }); 
    });
</script>

有关此演示，请参阅this PHP fiddle。

更新

为了隐藏标记为＆＃39; 更多＆＃39;的链接，可以将隐藏类的CSS规则更改为更通用。

这条规则：

#linksList li.hidden {
    display: none;
}

可以概括为：

.hidden {
    display: none;
}

这样，将关闭具有类名隐藏的任何元素的显示。利用它，可以将该类名添加到链接（即点击事件目标）：

if (clickEvent.target.id == 'showMore') {
    linksList.classList.add('expanded');
    clickEvent.target.classList.add('hidden');
}

PHP游乐场目前似乎没有加载。请参阅{{3}}

中的演示

Answer 2

你可以这样做：

$yourArray = array("a", "b", "c", "d", "e", "f", "g", "h", "i");
$first_five_elements = array_slice($yourArray, 0, 5);
$remaining_array_alements = array_slice($yourArray, 5);

print_r($first_five_elements);
print_r($remaining_array_alements);

array_slice()函数返回数组的选定部分。在这里，第一个参数是我们需要切割数组的数组的起始位置。如果我们跳过第二个参数，即我们需要切片的元素的长度，它会将剩余的数组从此位置返回到最后一个。有关详情，请访问https://www.w3schools.com/php/func_array_slice.asp

然后迭代数组以输出。点击“更多”按钮后，您可以显示$remaining_array_alements

Answer 3

这是一个简短的解决方案，您可以对其进行调整。

<?php
        $yourArray = array("a", "b", "c", "d", "e", "f", "g", "h", "i");
        $first_five_elements = array_slice($yourArray, 0, 5);
        foreach($first_five_elements as $array_element){
        echo '<li><a class="abc" id="'.$array_element->Id.'" href="#">'.$array_element->Name.'</a></li>';
        }
        echo '<a href="#" >More<i class="fa fa-caret-down" aria-hidden="true"></i></a>' 
        $yourArray = array("a", "b", "c", "d", "e", "f", "g", "h", "i");
        $first_rest_elements = array_slice($yourArray, 5, sizeof(yourArray)-5;
        foreach($first_rest_elements as $array_element){
                echo '<li><a class="abc" id="'.$array_element->Id.'" href="#">'.$array_element->Name.'</a></li>';
        }
?>

显示列表中的前5个元素，然后使用链接显示其余值

3 个答案:

更新