Question

任何人都希望通过PLUS / MINUS图标显示/隐藏列表中的元素来模仿BBC在其主页盒装内容上所做的事情。 http://www.bbc.co.uk/

我试过这样做但到目前为止效果并不完全正确。

或者，是否有插件或某些东西可以让你做类似的事情？

Answer 1

这只是隐藏和删除元素的问题：

<a href="javascript:void(0)" click="$('#somelist li:visible:last').hide()">+</a>
<a href="javascript:void(0)" click="$('#somelist li:hidden:first').show()">-</a>

当然，您需要将其与在加载页面时为每个项目输出正确CSS的内容联系起来。（这样你就可以跟踪你想要显示的项目数量。

你甚至可以在这个页面上试试这个：

$('.nav li:visible:last').hide()

如果你正在使用萤火虫，只需运行它，你就会看到导航栏发生变化：每次运行时，顶部的“按钮”将逐一消失。

你可以处理这个部分，但无论如何它都在这里。

<style>
  .hideme {
    display:none;
  }
</style>
<?php
$num_of_items = 5;
$items = array('one', 'two', 'three', 'four', 'five', 'six', 'seven');
echo "<ul id='somelist'>";
for($i=0;$i<sizeof($items);$i++) {
  echo "<li".(($i<$num_of_items)?"":" class='hideme'").">".$items[$i]."</li>";
}
echo "</ul>";
?>

Answer 2

感谢您的回复。我确实试过这个，但对我正在做的事情似乎有些过分。另外，我想在网站的不同部分执行几次代码。

最后，我发现了一个名为Collapsorz的插件https://github.com/akuzemchak/collapsorz，它正是我想要的。

无论如何，谢谢你的帮助。非常感谢。

jQuery加/减或扩展/折叠列表

2 个答案: