Html 如何创建更好的可扩展/折叠div?
我正在开发一个图像网格功能,其中显示图像。我面临创建可扩展/可折叠div的问题 HTML CSS 上面的代码创建了一个可扩展的div。但问题是,每当我单击任何一个图像时,div在每一行中都会被扩展。我正在尝试创建类似于以下内容的内容:。如果有人能在这方面帮助我,那就太好了。谢谢。:) 我在这里猜 将单击的键传递到此函数Html 如何创建更好的可扩展/折叠div?,html,css,angular,Html,Css,Angular,我正在开发一个图像网格功能,其中显示图像。我面临创建可扩展/可折叠div的问题 HTML CSS 上面的代码创建了一个可扩展的div。但问题是,每当我单击任何一个图像时,div在每一行中都会被扩展。我正在尝试创建类似于以下内容的内容:。如果有人能在这方面帮助我,那就太好了。谢谢。:) 我在这里猜 将单击的键传递到此函数(单击)=“expandImage(项$key)” 在你的代码里 expandImage(key) { this._expand = !this._expand; this.cli
(单击)=“expandImage(项$key)”
在你的代码里
expandImage(key) {
this._expand = !this._expand;
this.clickedItem = key;
this._maxHeight = '500px';
this._marginBottom = '10px';
}
在你的模板中
<div class="image--expand" *ngIf="clickedItem == item.$key" [ngClass]="{'image--expand': !_expand}">
<a class="expand__close"></a>
<img class="image--large" src="{{item.link}}">
</div>
所有图像只有一个_expandstate变量。您需要将其移动到一个项目中,这样每个项目都有自己的_展开状态。@hiper2d我应该如何实现它?如果你能帮我解决这个问题,那就太好了。感谢您抽出时间回答我的问题。:)我也有类似的问题,所以临时的解决办法是添加这个\u expand:=false代码>属性设置为对象本身。@J.D.我不熟悉这个。如果您能提供解决方案,那就太好了:)实际上,当我单击一个图像时,所有图像都会执行可展开操作。它应该只为单击它的1个图像展开。:)每个ngFor生成一个唯一的键,您将当前单击的键输入到一个变量中,并检查以使用ngIf显示div。是的,但我对这一点不熟悉,仍然无法完美地实现它。解决方案不起作用/您还可以使用[ngClass]
添加多个类,如[ngClass]=“{'image--expand':!\u expand'image--hide':clickedItem==item.$key}
谢谢!但我从您那边听说这是新的ngFor
生成唯一键。:)
.image-grid {
width: 100%;
padding-right: 30px;
padding-left: 30px;
}
.image__cell {
float: left;
position: relative;
}
.basic__img {
height: 200px;
max-width: 100%;
float: left;
overflow: hidden;
}
.image__cell.is-collapsed {
overflow: hidden;
padding: 0.6%;
}
.image__cell.is-collapsed .image--basic {
cursor: pointer;
}
.image--expand {
position: relative;
left: -5px;
padding: 0 5px;
box-sizing: content-box;
overflow: hidden;
background-color: #222;
max-height: 0;
transition: max-height .3s ease-in-out,margin-bottom .1s .2s;
}
.expand__close {
position: absolute;
top: 10px;
right: 20px;
color: #454545;
font-size: 50px;
line-height: 50px;
text-decoration: none;
}
.expand__close:before {
content: '×';
}
.expand__close:hover {
color: #fff;
}
.image--large {
max-width: 100%;
height: auto;
display: block;
padding: 40px;
margin: 0 auto;
box-sizing: border-box;
}
expandImage(key) {
this._expand = !this._expand;
this.clickedItem = key;
this._maxHeight = '500px';
this._marginBottom = '10px';
}
<div class="image--expand" *ngIf="clickedItem == item.$key" [ngClass]="{'image--expand': !_expand}">
<a class="expand__close"></a>
<img class="image--large" src="{{item.link}}">
</div>