具有多个显示/隐藏元素和多行的网格 [英] Grid with multiple show/hide elements and multiple rows
本文介绍了具有多个显示/隐藏元素和多行的网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在工作的网站上创建人员列表.我必须创建一个包含3列的连续4张图像的网格.在每列下方，可以通过展开"按钮展开更多信息.
I am creating a staff-list on a website I'm working on. I have to create a grid of 4 images in a row with 3 columns. Below each column, more info can expand from an "expand" button.
这是我所做的视觉示例: http://www.trusted.dev.creativecatmarketing.online/images/staff-member-list.png
here's a visual example of what I'm making: http://www.trusted.dev.creativecatmarketing.online/images/staff-member-list.png
我可以使用带有多个"if"语句的jquery来对div元素设置自定义类.然后，我为这些类设置了css样式，并且可以进行某些工作……但是我不得不重复两次以上，并且在动画中似乎已经有点问题了.
I have it sort of working with jquery with multiple "if" statements that set a custom class to div elements. I then have css styling for those classes, and it sort of works... but I have to duplicate this two more times and it already seems a bit buggy with the animation.
这是到目前为止我要发生的事情...
Here's what I got going on so far...
$(document).ready(function() {
$(".toggle-button").on("click", function() {
var $this = $(this).toggleClass('expand');
if ($(this).hasClass('expand')) {
$(this).text('COLLAPSE');
} else {
$(this).text('EXPAND');
}
$("#hidden-content-wrap").toggleClass("active");
if ($(this).hasClass('item1')) {
$("#content1").toggleClass("active2");
}
if ($(this).hasClass('item2')) {
$("#content2").toggleClass("active2");
}
if ($(this).hasClass('item3')) {
$("#content3").toggleClass("active2");
}
if ($(this).hasClass('item4')) {
$("#content4").toggleClass("active2");
}
});
});
p {
margin: 0px;
padding: 0px;
}
.staff-wrap {
background-color: #f5f2f2;
padding: 5px;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
transition: all 0.5s ease-out;
}
.staff-member {
flex-grow: 1;
max-width: 250px;
}
.staff-member img {
width: 100%;
}
#hidden-content-wrap {
visibility: hidden;
transition: all 0.5s ease-out;
width: 100%;
height: 0px;
background-color: #65665d;
}
#hidden-content-wrap.active {
height: auto;
visibility: visible;
transition: all 0.5s ease-in;
}
.hidden-content {
height: 0px;
visibility: hidden;
transition: all 0.5s ease-in;
color: white;
background-color: #65665d;
text-align: center;
padding: 20px;
}
.active2 .hidden-content {
height: 100px;
visibility: visible;
transition: all 0.5s ease-in;
}
.toggle-button {
width: 100%;
background-color: #65665d;
color: white;
margin-top: -2px;
border: none;
padding: 20px;
margin-bottom: 0px;
}
.expand {
padding-bottom: 40px;
}
button {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="staff-wrap">
<div class="staff-member">
<img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
<button class="toggle-button item1">EXPAND</button>
</div>
<div class="staff-member">
<img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
<button class="toggle-button item2">EXPAND</button>
</div>
<div class="staff-member">
<img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
<button class="toggle-button item3">EXPAND</button>
</div>
<div class="staff-member">
<img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
<button class="toggle-button item4">EXPAND</button>
</div>
</div>
<div id="hidden-content-wrap">
<div id="content1">
<div class="hidden-content">
<p>"hidden content 1"</p>
</div>
</div>
<div id="content2">
<div class="hidden-content">
<p>"hidden content 2"</p>
</div>
</div>
<div id="content2">
<div class="hidden-content">
<p>"hidden content 3"</p>
</div>
</div>
<div id="content3">
<div class="hidden-content">
<p>"hidden content 4"</p>
</div>
</div>
<div id="content4">
<div class="hidden-content">
<p>"hidden content 4"</p>
</div>
</div>
</div>
<!--
<div class="staff-wrap">
staff member 1
staff member 2
staff member 3
staff member 4
</div>
<div id="hidden-content-wrap">
hiddent content 1
hiddent content 2
hiddent content 3
hiddent content 4
</div>
-->
我希望隐藏的内容在打开第二个内容时自动消失.现在，这些元素的位置有点奇怪.
I would love hidden content to auto-disappear when a second one is toggled on. Right now the positioning of the elements works a little wonky.
我还必须对其余两行的if语句重复更多的整个过程...
I'll also have to repeat this whole process with more if statements for the remaining two rows...
<!--
<div class="staff-wrap">
staff member 1
staff member 2
staff member 3
staff member 4
</div>
<div id="hidden-content-wrap">
hiddent content 1
hiddent content 2
hiddent content 3
hiddent content 4
</div>
-->
推荐答案
我认为可以在不保存切换元素的情况下改进代码.
I think the code could be improved without saving a toggled element.
$(document).ready(function() {
$(".toggle-button").on("click", function() {
var target = $(this).data("target");
if ($(this).hasClass("expand")) {
$(this).toggleClass("expand");
$(this).text('EXPAND');
$("#" + target).removeClass("active");
} else {
$(".toggle-button").removeClass("expand");
$(".toggle-button").text("EXPAND");
$(".hidden-content").removeClass("active");
$(this).toggleClass('expand');
$(this).text('COLLAPSE');
$("#" + target).toggleClass("active");
}
});
});
p {
margin: 0px;
padding: 0px;
}
.staff-wrap {
background-color: #f5f2f2;
padding: 5px;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
transition: all 0.5s ease-out;
}
.staff-member {
flex-grow: 1;
max-width: 250px;
}
.staff-member img {
width: 100%;
}
#hidden-content-wrap {
visibility: hidden;
transition: all 0.5s ease-out;
width: 100%;
height: 0px;
background-color: #65665d;
}
.hidden-content {
height: 0px;
visibility: hidden;
transition: all 0.5s ease-in;
color: white;
background-color: #65665d;
text-align: center;
}
.active.hidden-content {
height: 100px;
visibility: visible;
transition: all 0.5s ease-in;
padding: 20px;
}
.toggle-button {
width: 100%;
background-color: #65665d;
color: white;
margin-top: -2px;
border: none;
padding: 20px;
margin-bottom: 0px;
}
.expand {
padding-bottom: 40px;
}
button {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="staff-wrap">
<div class="staff-member">
<img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
<button class="toggle-button item1" data-target="content1">EXPAND</button>
</div>
<div class="staff-member">
<img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
<button class="toggle-button item2" data-target="content2">EXPAND</button>
</div>
<div class="staff-member">
<img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
<button class="toggle-button item3" data-target="content3">EXPAND</button>
</div>
<div class="staff-member">
<img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
<button class="toggle-button item4" data-target="content4">EXPAND</button>
</div>
</div>
<div id="content1" class="hidden-content">
<p>"hidden content 1"</p>
</div>
<div id="content2" class="hidden-content">
<p>"hidden content 2"</p>
</div>
<div id="content3" class="hidden-content">
<p>"hidden content 3"</p>
</div>
<div id="content4" class="hidden-content">
<p>"hidden content 4"</p>
</div>
这篇关于具有多个显示/隐藏元素和多行的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
