个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我目前在点击时更改 div 高度时遇到问题。我使用砌体和 Bootstrap 来显示卡片布局并展开卡片以在单击时显示更多信息，但仅向下移动一列而不是一行内的卡片。当我尝试使用 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');
});
});
最佳答案
我不太确定您在寻找什么，但如果您想单击卡片的任何部分来触发转换并切换图标，请尝试以下操作:
$(document).ready(function () {
var $grid = $('.grid').masonry({
itemSelector: '.col-override',
horizontalOrder: true,
transitionDuration: '0.8s',
});
$grid.on('click', '.card', function () {
$(this).toggleClass('open');
$(this).find('.card-header .card-tools .btn.card-toggle i').toggleClass('openState');
// trigger layout after item size changes
$grid.masonry('layout');
});
});
关于javascript - Masonry JS 忽略 CSS 转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46227766/
25
4
0
我正在尝试设置我的 git 配置，以便我可以使用工作环境和个人环境。 这是我的 ~.gitconfig 文件的内容(碰巧 work 和 private 在 github 上): [url "git@
我有以下情况。我在 Sheet1 上有一个项目列表，我想将项目复制到 Sheet2 并排除特定项目。 假设我在 Sheet1 上有以下项目列表: 我想将“梨”单元格留在 Sheet2 上。 它应该完全
我试图让 gcc 以不同的语言提供错误消息。但它仍然给我英文的错误信息。 我的语言环境输出 varun@varun-desktop:$ 语言环境 LANG=en_IN LC_CTYPE="es_EC.
我在 Linux x86 上使用 gcc。 我的程序将指向 C 函数的指针导出到 LLVM JIT 函数。调用约定是 cdecl。它在 Windows 上的 MingW 上运行良好。但是奇怪的事情发生
windows 上 php 的奇怪问题...我的应用程序加载了一个“核心”文件，该文件加载了一个设置文件、注册自动加载、进行初始化等。在核心文件的顶部我有 include_once("config.p
在工具|选项|调试器选项 |语言异常可以忽略特定的异常类型。是否可以为每个项目定义这个？例如在调试构建配置中(Delphi 2009 和/或 2010)？ /编辑:Reported in QC 最佳答
我在一个文本框旁边有 2 个按钮，在这 2 个按钮后面还有另一个文本框。第一个文本框的 tabindex 为 1000，第一个按钮为 1001，第二个按钮为 1002。第二个文本框的 tabindex
我是 python 新手，正在尝试类型提示，但它们似乎只在某些情况下起作用。它们似乎在属性返回类型上按预期工作，但是当我尝试将整数分配给字符串值(即 self._my_string = 4)时，我没有
问题陈述 我有一些国家和这些国家的州的依赖组合框。我使用 VBA 在第一个组合框中填充唯一值，然后在第二个组合框中动态填充唯一值。该代码似乎忽略了初始传递中的条件。 例如，该代码适用于第一个国家/地区
我对 Javascript 有点陌生。我试图做到这一点，以便单击一个页面上的图像会将您带到一个新页面，并在该新页面上显示特定的 div，因此我使用 sessionStorage 来记住并使用 bool
我不确定我是否正确地处理了这个问题。 我有一个 ASP.NET MVC Web 应用程序。有 4 个主要“页面”通过单击菜单选项，可以选择一个页面，并将该页面选项存储在本地存储中。 现在，如果我刷新页
我的页面工作正常，并按预期显示日期和时间，直到我不得不添加 new Date() 以避免 momentjs deprecation warning 。现在我的约会比应有的时间晚了 5 个小时。 我该如
我需要合并一个 fork 项目。不幸的是，CVS $Id 行不同，因此我尝试的合并工具报告所有文件都不同(其中 95% 只有这一行不同) 是否有一个合并工具可以配置为忽略基于模式的行比较结果？ [编辑
我是 python 新手，正在尝试类型提示，但它们似乎只在某些情况下起作用。它们似乎在属性返回类型上按预期工作，但是当我尝试将整数分配给字符串值(即 self._my_string = 4)时，我没有
我正在尝试根据 How do a send an HTTPS request through a proxy in Java? 使用代理访问 https 网页 但是我遇到了一个奇怪的问题:HttpsU
我有一个简单的 CMakeLists.txt 文件: cmake_minimum_required(VERSION 2.8.9) project (sample) add_library(Shared
这个问题在这里已经有了答案: typedef pointer const weirdness (6 个答案) 关闭 8 年前。 我有一个结构体 type_s。然后我将指向 struct type_s
我正在尝试制作一个使用 AES 256 加密的应用程序。不幸的是我无法让它工作。也许我没有完全理解密码逻辑。 所以它正在工作，但据我了解，哈希包含密码。但如果我更改密码，输出是相同的。因此，Crypt
我的文件包含一些行，例如 "This is a string." = "This is a string's content." " Another \" example \"" = " New ex
我尝试使用此查询来获取所选健身房的所有用户。 我的问题是查询忽略了这部分:ual.user_id = weekUsers.user_id 查询似乎获取了与我选择的日期匹配的所有用户 ID，而不检查该用
我是一名优秀的程序员,十分优秀！