展开列表用的slideToggle

我有一个无序列表像这样的：展开列表用的slideToggle

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

的问题是，它的幻灯片每一个人里的项目，我需要滑动列表的其余部分，就像我会滑动整个列表一样。

我该怎么做？

来源

2009-02-11 Sindre Sorhus

挺笨拙的解决方案恕我直言，但如果你的作品 - 它为你的作品...

对于列表点击同一链路上的折叠和展开：

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

});

来源

2009-02-11 18:55:02

快速&不太脏的方式：用div元素和slideToggle('#myList div.wrapper')包装它。

来源

2009-02-11 08:55:47 ohnoes

这方法行不通，因为列表是一个日志，和最新的项目是在顶部，并且可以在增加新项目，旧的被压了下来，和隐藏。这可能吗？ – 2009-02-11 10:58:13

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

来源

2009-02-11 12:01:31

你的方法不起作用，因为它会找到高度与高度：自动。

经过很多失败并尝试之后，我想出了几乎可以工作的东西。

你对我的代码有任何评论，我会很感激。

，我会怎么做，如果我想同样的链接，折叠列表再次

<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>

来源

2009-02-11 13:04:17

请告诉我用简单的toggeling列表中，而不是元素的问题？

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

来源

2009-02-12 16:35:46

展开列表用的slideToggle

回答

相关问题