我在点击时将高度更改为div时出现问题。我正在使用砖石和引导程序来显示卡片布局并展开卡片以显示有关点击的更多信息，但仅将列中的卡片向下移动而不是一行。当我尝试使用CSS添加转换时，它会被忽略而div只会从我的'.open'类中切换新的高度。谢谢你的帮助！
以下是项目的Codepen供参考：https://codepen.io/silasisland/pen/YrXPov
HTML
<main>
<section id="wrapper">
<div class="row grid">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
CSS
main{
position: relative;
padding-top: 50px;
background-color: gray;
min-height: 100%;
}
#wrapper{
padding-left: 10px;
padding-right: 10px;
}
.col-override{
padding: 10px;
margin: 0;
}
.grid {
height: auto;
margin: 10px 0;
}
.grid .card {
margin: 0;
background: #FFFFFF;
width: 100%;
cursor: pointer;
float: left;
border: #ddd;
vertical-align: top;
box-shadow: 0, 1px, 1px, rgba(0, 0, 0, 0.05);
}
.grid .card.open {
transition: height 0.8s linear;
-webkit-transition: height 0.8s linear;
height: 350px;
}
.grid .card .card-header {
position: relative;
padding: 10px 20px;
border-bottom: 1px solid #eee;
box-shadow: 0, 3px, 1px, rgba(0, 0, 0, 0.025);
}
.grid .card .card-header .customer-name {
padding-right: 60px;
}
.grid .card .card-header .customer-name h3 {
font-size: 14px;
font-size: 14px;
margin: 0px;
font-weight: bold;
color: blue;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.grid .card .card-header .card-tools {
position: absolute;
right: 10px;
top: 2px;
text-align: right;
white-space: nowrap;
}
.grid .card .card-header .card-tools .btn {
color: blue;
padding: 0px 3px;
}
.grid .card .card-header .card-tools .btn.card-toggle {
font-size: 20px;
}
.grid .card .card-header .card-tools .btn:focus {
outline: none;
}
.grid .card .card-header .card-tools .btn .openState {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.grid .card .card-body .card-summary {
padding: 10px 20px;
}
.grid .card .card-body .card-summary .card-label {
color: blue;
font-size: 14px;
}
JS
$(document).ready(function () {
var $grid = $('.grid').masonry({
itemSelector: '.col-override',
horizontalOrder: true,
transitionDuration: '0.8s',
});
$grid.on('click', '.card', function () {
$(this).toggleClass('gigante');
// trigger layout after item size changes
$grid.masonry('layout');
});
// Open & Close Cards
$('.card-body').click(function() {
$(this).parent().toggleClass('open');
$(this).parent().find('.card-header .card-tools .btn.card-toggle i').toggleClass('openState');
});
});
答案 0 :(得分：0)
我不太确定你在寻找什么，但如果你想点击卡片的任何部分来触发转换并切换图标，试试这个：
not exists