javascript - Show more / less button for list of divs
问题描述
I have this code below that consist of 2 list of divs what i'm currently trying to do is to create a show more/less button for the list, but the problem is that because my list is clickable its quite hard to find a specific solution for it. I have tried to find many solutions online but none of them work.
The fiddle below is what i have attempted but is it too buggy When i move the value from Random Fruits
to Total fruits
and after that bring it all back to Random Fruits
it wont be able to show the full list. Any help / suggestion would be greatly appreciated thanks.
https://jsfiddle.net/8g4wyLsc/
var redpill = {};
var greenpill = {};
var randompill = {};
var key = "Red Fruits";
redpill[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];
var key2 = "Green Fruits";
greenpill[key2] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];
var key3 = "Random Fruits";
randompill[key3] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];
function redraw() {
var combineString = '';
$.each(redpill[key], function(index) {
combineString += ('<div class="pilldiv redpill class">' + redpill[key][index] + '</div>');
});
$('.combineclass').html(combineString);
$.each(greenpill[key2], function(index) {
combineString += ('<div class="pilldiv greenpill class">' + greenpill[key2][index] + '</div>');
});
$('.combineclass').html(combineString);
var randomString = '';
$.each(randompill[key3], function(index) {
randomString += ('<div class="pilldiv randompill class">' + randompill[key3][index] + '</div>');
});
$('.randomclass').html(randomString);
}
function listener() {
$(document).ready(function() {
$(document).on("click", "#suggestid div", function() {
data = this.innerHTML;
$(".total_count_Green_Fruits").html(key2 + ': ' + greenpill[key2].length);
var element = $(this).detach();
$('#currentid').prepend('<div class="new-green-fruit pilldiv class ">' + element.html() + '</div>');
});
});
$('body').on('click', 'div.new-green-fruit', function() {
data2 = this.innerHTML;
$(this).detach();
var element2 = $(this).detach();
$('#suggestid').prepend('<div class="pilldiv randompill class" >' + element2.html() + '</div>');
});
}
redraw();
listener();
.pilldiv {
padding: 8px 15px;
text-align: center;
font-size: 15px;
border-radius: 25px;
color: Black;
margin: 2px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.randompill:after {
content: "\002B";
float: left;
width: 16px;
}
.new-green-fruit:after {
content: "\292B";
float: left;
width: 16px;
}
.redpill {
background-color: Pink;
cursor: default;
}
.greenpill {
background-color: SpringGreen;
cursor: default;
}
.randompill {
background-color: LightBlue;
cursor: pointer;
}
.class {
font-family: Open Sans;
}
.center {
display: flex;
justify-content: center;
}
.wrappingflexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.top {
margin-bottom: 20px
}
h3 {
font-weight: normal;
}
.panel {
display: table;
height: 100%;
width: 85%;
background-color: white;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.new-green-fruit {
background-color: LightBlue;
cursor: pointer;
}
.top {
margin-bottom: 30px;
}
#leftpanel {
float: left;
width: calc(50% - 5px);
}
#rightpanel {
float: right;
width: calc(50% - 5px);
}
.container {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<div id=leftpanel>
<h3 class="class center">Total Fruits</h3>
<div id="currentid" class="combineclass wrappingflexbox top"></div>
</div>
<div id="rightpanel">
<h3 class="class center">Random Fruits</h3>
<div id="suggestid" class="suggestid randomclass wrappingflexbox top"></div>
</div>
</div>
<script>
</script>
</body>
</html>
解决方案
这里的问题是您必须检查#leftpanel
&#rightpanel
高度并将最高设置为defHeight
变量。
像这样的东西:
defHeight = ($('#leftpanel').height() >= $('#rightpanel').height()) ? $('#leftpanel').height() : $('#rightpanel').height()
var redpill = {};
var greenpill = {};
var randompill = {};
var key = "Red Fruits";
redpill[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];
var key2 = "Green Fruits";
greenpill[key2] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];
var key3 = "Random Fruits";
randompill[key3] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];
function redraw() {
var combineString = '';
$.each(redpill[key], function(index) {
combineString += ('<div class="pilldiv redpill class">' + redpill[key][index] + '</div>');
});
$('.combineclass').html(combineString);
$.each(greenpill[key2], function(index) {
combineString += ('<div class="pilldiv greenpill class">' + greenpill[key2][index] + '</div>');
});
$('.combineclass').html(combineString);
var randomString = '';
$.each(randompill[key3], function(index) {
randomString += ('<div class="pilldiv randompill class">' + randompill[key3][index] + '</div>');
});
$('.randomclass').html(randomString);
}
function adjustHeight(){
/* CONTROL HIGHTEST DIV: RIGHT OR LEFT */
defHeight = ($('#leftpanel').height() >= $('#rightpanel').height()) ? $('#leftpanel').height() : $('#rightpanel').height()
if($wrap.height() != slideHeight ){
$wrap.animate({
height: defHeight
}, "normal");
}
}
function listener() {
$(document).ready(function() {
$(document).on("click", "#suggestid div", function() {
data = this.innerHTML;
$(".total_count_Green_Fruits").html(key2 + ': ' + greenpill[key2].length);
var element = $(this).detach();
$('#currentid').prepend('<div class="new-green-fruit pilldiv class ">' + element.html() + '</div>');
adjustHeight()
});
});
$('body').on('click', 'div.new-green-fruit', function() {
data2 = this.innerHTML;
$(this).detach();
var element2 = $(this).detach();
$('#suggestid').prepend('<div class="pilldiv randompill class" >' + element2.html() + '</div>');
adjustHeight()
});
}
redraw();
listener();
var slideHeight = 100;
var defHeight
var curHeight
var $wrap
$(".container").each(function() {
var $this = $(this);
$wrap = $this.children(".wrapper");
defHeight = $wrap.height();
if (defHeight >= slideHeight) {
var $readMore = $this.find(".read-more");
$wrap.css("height", slideHeight + "px");
$readMore.append("<a href='#'>Show More</a>");
$readMore.children("a").bind("click", function(event) {
curHeight = $wrap.height();
if (curHeight == slideHeight) {
$wrap.animate({
height: defHeight
}, "normal");
$(this).text("Show Less");
$wrap.children(".gradient").fadeOut();
} else {
$wrap.animate({
height: slideHeight
}, "normal");
$(this).text("Show More");
$wrap.children(".gradient").fadeIn();
}
return false;
});
}
});
/* this is resize stuff */
var resize;
$(window).resize(function() {
clearTimeout(resize);
resize = setTimeout(resizeStuff, 200);
});
function resizeStuff() {
adjustHeight()
}
/* End of resize stuff */
.pilldiv {
padding: 8px 15px;
text-align: center;
font-size: 15px;
border-radius: 25px;
color: Black;
margin: 2px;
}
.randompill:after {
content: "\002B";
float: left;
width: 16px;
}
.new-green-fruit:after {
content: "\292B";
float: left;
width: 16px;
}
.redpill {
background-color: Pink;
cursor: default;
}
.greenpill {
background-color: SpringGreen;
cursor: default;
}
.randompill {
background-color: LightBlue;
cursor: pointer;
}
.class {
font-family: Open Sans;
}
.center {
display: flex;
justify-content: center;
}
.wrappingflexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.top {
margin-bottom: 20px
}
h3 {
font-weight: normal;
}
.panel {
display: table;
height: 100%;
width: 85%;
background-color: white;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.new-green-fruit {
background-color: LightBlue;
cursor: pointer;
}
.top {
margin-bottom: 30px;
}
#leftpanel {
float: left;
width: calc(50% - 5px);
background-color: #f2f2f2;
}
#rightpanel {
float: right;
width: calc(50% - 5px);
background-color: #f2f2f2;
"
}
.container {
width: 100%;
}
.wrapper {
position: relative;
overflow: hidden;
padding: 10px;
}
.gradient {
width: 100%;
height: 35px;
background: url(http://spoonfedproject.com/wp-content/uploads/demo/jquer-slide/images/bg-gradient.png) repeat-x;
position: absolute;
bottom: 0;
left: 0;
}
.read-more {
background: #fff;
color: #333;
padding: 5px;
}
.read-more a {
padding-right: 22px;
font-weight: 700;
text-decoration: none;
}
.read-more a:hover {
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<div id=leftpanel>
<h3 class="class center">Total Fruits</h3>
<div id="currentid" class="combineclass wrappingflexbox top"></div>
<div class="gradient">
</div>
</div>
<div id="rightpanel">
<h3 class="class center">Random Fruits</h3>
<div id="suggestid" class="randomclass wrappingflexbox top"></div>
<div class="gradient">
</div>
</div>
</div>
<div class="read-more">
</div>
</div>
注意:正如我在评论中所说,你的代码没有响应,所以我添加了一个“调整大小的东西”来控制窗口的变化。现在看来一切正常。
希望它可以帮助你。
干杯:)
推荐阅读
- llvm - LLVM - 如何将参数传递给函数调用| 错误:调用签名错误的函数
- .net - 在 dotnet core 中添加类库作为项目引用也会导致访问其依赖项
- android - 如何从 recyclerView 中删除项目?
- python - 给出公差比较列表中的浮点数
- php - 为前端选择网站架构/逻辑/结构以及如何实现它
- azure - Azure Functions:为什么我在 Kudu 中看到两个 w3wp 进程?
- python-3.x - 使用 kivymd 的文件管理器代码不起作用
- css - 变暗背景但不是内部内容 - React / Ionic /CSS
- php - 登录尝试修改与另一列
- php - 内部 orderBy 被 Laravel Eloquent 中的外部 orderBy 覆盖