jQuery 在列表上加/减或展开/折叠

Question

任何人都想尝试模仿 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()

如果您使用的是 Firebug，只需运行此命令，您就会看到导航栏发生变化:每次运行时，顶部的“按钮”都会一一消失。

你也许可以处理这部分，但无论如何它就是这样。

<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>";
?>