帶有過渡效果的下拉列表，下拉的內容高度不一致且不肯定如何辦？

遇到過兩三次這種需求：作一個帶有過渡效果的下拉列表，而且下拉列表的內容的高度不肯定，不一致，有的甚至列表項的高度都不一致；以下圖所示：

點擊每一個列表項時，下拉的內容會下滑出來。。。雖然網上有各類解決辦法，可是有的試了不太好用，就本身想了一個有點麻煩可是通常狀況下感受挺好用的解決方法。。

採用以下代碼結果：

<li class="ft-item-color">
　　<div class="item-wrap">
　　　　<i class="icon"></i>
　　　　<span class="item-title">想投稿(文章)，如何聯繫？ </span>
　　</div>
　　<div class="item-detail">首先很是感謝您的承認與支持，理論上咱們不接受投稿，如很是指望合做。能夠發簡介或投稿至<a href="mailto:service@12344.com">service@12344.com</a> ,再次感謝承認！</div>

</li>

 .item-wrap 是列表項，item-detail是列表的內容，ft-item-color是每一個列表項的外包層,  item-title是列表的標題,。item-detail要設置具體的高度。其他的都是經過js或者是內容撐開的。

利用js來獲取item-title的高度，賦值給li，給li設置overflow：hidden；當點擊列表項的時候，獲取item-detail的高度，將其與li的原來的高度相加劇新賦值給li的高度。（ps：前提必定要在給li的css加transition：all 0.5s，因爲li的高度是經過js設置的，所以該css屬性也要在js中設置高度以後設置。由於transition是須要在變化前和變化後都是具體的高度才能實現過渡效果，若是有一方是auto就不能實現過渡效果。）

思路就是如上，具體代碼以下：

 1  var con_high, item_height = []; // 定義兩個變量，一個是列表下拉內容高度，一個是列表項的高度數組
 2         for(var i = 0; i <  $('.list-wrap>li').length; i++){
 3             //  次循環爲每一個li設置高度，是由於每一個列表項的高度也都是不一致且不肯定的，這樣獲取每一個列表項的高度來設置li的高度
 4             $('.list-wrap>li').eq(i).height($('.item-title').eq(i).height());
 5             //  此項是暫時保存每一個列表項的高度
 6             item_height[i] = $('.list-wrap>li').eq(i).height();
 7 
 8             // 此處用到了閉包，因爲在循環中使用點擊事件，會形成每次點擊都是最後一個，所以，咱們使用閉包來解決此問題。            
 9             (function (i) {
10 
11                 $('.list-wrap>li').eq(i).on('click',function () {
12                     
13                     // 點擊每一個列表項的時候，咱們須要獲取列表項的下拉內容的高度，再加上列表項的高度，就是新的內容須要個高度                    
14                     con_high = $(this).find('.item-detail').height();
15                     var new_height = con_high + item_height[i];
16                     // 可是，此處咱們須要先將全部的列表項高度還原，而後在外面使被點擊的列表項下拉高度增大                    
17                     for(var j = 0;j < $('.item-title').length; j++){
18                         $('.list-wrap>li').eq(j).height($('.item-title').eq(j).height());
19                     }
20 
21                     $(this).css('height',new_height + 'px').find('.icon').addClass('acitve');
22 
23                     $(this).siblings('li').find('.icon').removeClass('acitve')
24                 })
25 
26             })(i)
27 
28         }