jquery - jQuery 加/减或展开/折叠列表

Question

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

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

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

Answer 1

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

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

还是要谢谢你的帮助。非常感激。

Answer 2

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

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