时间戳

首页 > 解决方案 > 如何在单击时显示特定标签并隐藏 div 中存在的另一个标签？

html - 如何在单击时显示特定标签并隐藏 div 中存在的另一个标签？

问题描述

我正在尝试做一个简单的组件，只需在点击时更改图标 img，它是两个简单的图像。问题是关闭图标甚至没有出现，当我点击它时打开的图标也没有隐藏。

我试过添加(click)="isVisible = !isVisible"和[ngClass]="{ 'isVisible': isVisible }"

这些似乎都不起作用，这是我的 HTML：

<div class="toggle" (click)="isVisible = !isVisible">
    <div class="icon">
      <img src="https://image.flaticon.com/icons/png/512/64/64576.png" class="icon-open" alt>
      <img src="https://image.flaticon.com/icons/png/512/24/24139.png" class="icon-close"
        [ngClass]="{ 'isVisible': isVisible }" alt>
    </div>
</div>

我希望.icon-close在单击时显示并隐藏“.icon-open”.toggle

标签： htmlangularsass

解决方案

当您使用隐藏和显示功能时，您需要创建一个隐藏和显示的两个类。

.block {
  display: block;
}
.none {
  display: none;
}

并像使用它一样

<div class="toggle" (click)="isVisible = !isVisible">
<div class="icon">
  <img src="https://image.flaticon.com/icons/png/512/64/64576.png" height="30px" class="icon-open"  [ngClass]="{ 'isVisible': !isVisible }" alt>
  <img src="https://image.flaticon.com/icons/png/512/24/24139.png" height="30px" class="icon-close"
    [ngClass]="{ 'block': isVisible,'none':!isVisible }" alt>
</div>

请在此处查看完整演示

推荐阅读