jQuery 加/减或展开/折叠列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/734657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery plus/minus or expand/collapse on a list
提问by davebowker
Anyone want to have a crack at emulating what the BBC have done on their homepage boxed contents with the PLUS / MINUS icons showing/hiding elements in a list. http://www.bbc.co.uk/
任何人都想通过加号/减号图标在列表中显示/隐藏元素来模仿 BBC 在其主页上的盒装内容。http://www.bbc.co.uk/
I've tried to do this but so far the effect isn't exactly right.
我试过这样做，但到目前为止效果并不完全正确。
Or, is there a plugin or something which would allow you to do a similar thing?
或者，是否有插件或其他东西可以让您做类似的事情？
采纳答案by davebowker
Thanks for your reply. I did try this but it seemed a little overkill for what I was doing. Plus I wanted to execute the code a few times on different sections of the site.
感谢您的回复。我确实尝试过这个，但对于我正在做的事情来说似乎有点矫枉过正。另外，我想在网站的不同部分执行几次代码。
In the end I found a plugin called Collapsorz, https://github.com/akuzemchak/collapsorzwhich does exactly what I wanted.
最后我找到了一个名为 Collapsorz 的插件，https://github.com/akuzemchak/collapsorz完全符合我的要求。
Thanks for your help anyway. Much appreciated.
还是要谢谢你的帮助。非常感激。
回答by cgp
This is just a matter of hiding and removing elements:
这只是隐藏和删除元素的问题：
<a href="javascript:void(0)" click="$('#somelist li:visible:last').hide()">+</a>
<a href="javascript:void(0)" click="$('#somelist li:hidden:first').show()">-</a>
Of course, you'll want to tie that in with something which puts out the right CSS per item when the page is loaded. (so you would keep track of the number of items you want to display.
当然，您需要将其与在加载页面时为每个项目显示正确 CSS 的内容联系起来。（因此您可以跟踪要显示的项目数量。
You can even try this out on this page:
你甚至可以在这个页面上试试这个：
$('.nav li:visible:last').hide()
If you're using firebug, just run this, and you'll see the nav bar change: The "buttons" at the top will disappear, one by one for each time you run it.
如果您使用的是 firebug，只需运行它，您就会看到导航栏发生变化：每次运行它时，顶部的“按钮”都会一个一个地消失。
You can probably handle this part but here it is anyway.
您可能可以处理这部分，但无论如何都在这里。
<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>";
?>
