我有一个像这样的无序列表:
<a href="#" id="myList-toggle">Show the rest</a>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
和这个 jQuery 代码:
var list = $('#myList li:gt(4)');
list.hide();
$('a#myList-toggle').click(function() {
list.slideToggle(400);
return false;
});
问题是它会滑动每个单独的 li 项目，我需要滑动列表的其余部分，就像我会滑动整个列表一样。
我怎样才能做到这一点？
最佳答案
你的方法不起作用，因为它会找到 height: auto 的高度。
经过多次失败和尝试，我想出了一些几乎可行的方法。
您对我的代码有什么意见吗，我将不胜感激。
如果我想要相同的链接再次折叠列表，我该怎么做
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var list = $('ul#myList');
var original_height = list.height();
list.css({height:$('#myList li').height()*5});
$('a#myList-toggle').click(function() {
list.animate({height:original_height})
return false;
});
});
</script>
<style type="text/css">
ul#myList {
overflow: hidden;
}
</style>
</head>
<body>
<a href="#" id="myList-toggle">Show the rest</a>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</body>
</html>
关于javascript - 使用 SlideToggle 展开列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/535868/