Javascript 使用可移动div显示更多/更少

下面的代码包含两个div列表

Total Fruits和Random Fruits

，其中一个

Show more按钮将其折叠。问题是，如果我在未单击“显示更多”按钮的情况下，将值从
Random Fruits
添加到
Total Fruits
，列表将展开

不管怎样，当我来回移动值时，是否有办法使列表的高度不扩大或减少？对于我目前的情况，有没有更好的方法可以用？因为我觉得能够前后移动值会给我当前的方法带来很多错误

如有任何帮助/建议，将不胜感激


var redpill={}；
var greenpill={}；
var randompill={}；
var key=“红色水果”；
redpill[key]=“苹果”、“樱桃”、“草莓”、“石榴”、“草莓”、“西瓜”、“榴莲”、“鳄梨”、“青柠”、“蜜露”、“西瓜”、“榴莲”、“青柠”、“蜜露”、“西瓜”、“榴莲”、“鳄梨”、“青柠”、“蜜露”]；
var key2=“绿色水果”；
绿丸[key2]=“西瓜”、“榴莲”、“鳄梨”、“青柠”、“蜜露”、“西瓜”、“榴莲”、“鳄梨”、“青柠”、“蜜露”、“西瓜”、“榴莲”、“鳄梨”、“青柠”、“蜜露”]；
var key3=“随机果实”；
随机药丸[key3]=“西瓜”、“榴莲”、“鳄梨”、“酸橙”、“蜜露”、“西瓜”、“榴莲”、“鳄梨”、“酸橙”、“蜜露”、“西瓜”、“榴莲”、“鳄梨”、“酸橙”、“蜜露”、“西瓜”、“榴莲”、“蜜露”、“酸橙”、“蜜露”];
函数重画（）{
var combineString=''；
$.each（redpill[key]，函数（index）{
combineString+=（“”+redpill[key][index]+“”）；
});
$（'.combineclass'）.html（combineString）；
$.each（绿色药丸[key2]，函数（索引）{
combineString+=（''+绿色药丸[key2][index]+''）；
});
$（'.combineclass'）.html（combineString）；
var randomString=''；
$.each（随机药丸[key3]，函数（索引）{
randomString+=（''+randompill[key3][index]+''）；
});
$（'.randomclass'）.html（随机字符串）；
}
函数侦听器（）{
$（文档）.ready（函数（）{
$（文档）。在（“单击”，suggestid div），函数（）上{
data=this.innerHTML；
$（“.total\u count\u Green\u Fruits”）.html（键2+：“+greenpill[key2].length）；
var元素=$（this.detach（）；
$（'#currentid'）.prepend（''+element.html（）+''）；
});
});
$（'body'）。在（'click'，'div.new-green-fruit'，function（）上{
data2=this.innerHTML；
$（this.detach（）；
var element2=$（this.detach（）；
$（'#suggestid'）.prepend（''+element2.html（）+''）；
});
}
重画（）；
监听器（）；
$（'#suggestid，#currentid'）.find（'div:gt（15）'）.hide（）；
$（“.button1”）。在（“单击”，函数（）上）{
$（'#suggestid，#currentid'）.find（'div:gt（15）'）.toggle（）；
});
函数更改（）{
var elem=document.getElementById（“button1”）；
如果（elem.value==“显示更少”）elem.value=“显示更多”；
else elem.value=“显示较少”；
}
.pilldiv{
填充：8px 15px；
文本对齐：居中；
字体大小：15px；
边界半径：25px；
颜色：黑色；
保证金：2倍；
}
.以后{
内容：“\002B”；
浮动：左；
宽度：16px；
}
.新的绿色水果：之后{
内容：“\292B”；
浮动：左；
宽度：16px；
}
雷德派尔先生{
背景颜色：粉红色；
游标：默认值；
}
格林皮尔先生{
背景色：春绿；
游标：默认值；
}
.随机药丸{
背景颜色：浅蓝色；
光标：指针；
}
.类{
字体系列：开放式SAN；
}
.中心{
显示器：flex；
证明内容：中心；
}
.包装盒{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.顶{
边际下限：20px
}
h3{
字体大小：正常；
}
.小组{
显示：表格；
身高：100%；
宽度：85%；
背景色：白色；
边框：1px纯黑；
左边距：自动；
右边距：自动；
}
.新的绿色水果{
背景颜色：浅蓝色；
光标：指针；
}
.顶{
边缘底部：30px；
}
.显示按钮{
位置：相对位置；
左：87%；
边界：无；
填充：0；
背景：无；
文字装饰：下划线；
边缘顶部：15px；
}

总果数
随机果实
是固定的
高度
和
溢出-y
选项吗？@KiranPaulVJ对不起，你是什么意思？意思是
#currentid{高度：200px；溢出-y:auto；}
。这对你有用吗？@KiranPaulVJ Erm不是真的我不想添加滚动条如果你不想显示滚动条，如果你也不想增加容器高度，用户如何查看/访问添加的项目？是否要将固定高度与溢出y:hidden结合使用？