展開列表用的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

回答

相關問題