Question

我有一个像这样的无序列表：

 <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;
   });

问题是它会滑动每个单独的项目，我需要滑动列表的其余部分，就像我将滑动整个列表一样。

我该怎么做？

Answer 1

你的方法不起作用，因为它会找到高度为高度：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>

Answer 2

相当笨拙的解决方案恕我直言，但如果它适合你 - 它适合你......

单击同一链接以折叠和展开列表：

$(document).ready(function() {

        var list = $('ul#myList');   
        var original_height = list.height();
        var new_height = $('#myList li').height()*5;
        list.css({height:new_height});

        $('a#myList-toggle').click(function() {
        if( list.height() == original_height ) {
            list.animate({height:new_height});
        } else {
            list.animate({height:original_height});
        }
        return false;
    });

});

Answer 3

快速＆amp;不那么脏的方式：用div元素和slideToggle('#myList div.wrapper')包裹它。

Answer 4

您可以使用UL为overflow:hidden标记指定高度。然后使用animation({height:auto})显示所有内容。否则，你没有任何可行的解决方案。

Answer 5

只是简单地编写列表而不是元素是什么问题？

 $(function(){
    var listheight = $("#mylist").height();
    $("a#myList-toggle").toggle(function(){
        $("#mylist").slideToggle();
    },function(){$("#mylist").animate({height:listheight})});
    });

使用slideToggle展开列表

5 个答案: