切换按钮 - 显示/隐藏信息答案

【问题标题】：Toggle button - show / hide information切换按钮 - 显示/隐藏信息
【发布时间】：2020-07-05 00:53:02
【问题描述】：

当我点击图标（箭头）时，有人可以帮我隐藏/显示信息吗？我试过用javascript，虽然不是最好的方法，但也没用。

我打算通过单击图像 https://img.icons8.com/android/24/000000/down.png，隐藏下面的信息，并且该图像将变为向上箭头的图像https://img.icons8.com/android/24/000000/up.png >

当您单击朝上的 sta 时，信息会再次出现，并且相同的图像会被朝下的箭头图像替换。

有人可以帮我吗？

DEMO - STACKBLITZ

代码

<div *ngFor="let item of data">
    <div class="d-flex flex-row"
        style="align-items: center;margin-top: 8px;padding: 16px;background: #E8EEF5 0% 0% no-repeat padding-box;border-radius: 8px;">
    <div>
        <img src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
        <img src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
  </div>
    <div><span style="margin-left: 8px;" class="selectioname">{{item.name}}</span></div>
    <div style="margin-left:auto">
        <img src="https://img.icons8.com/material-outlined/24/000000/close-window.png"/>
  </div>
    </div>
    <div class="d-flex flex-row"
                style="display: flex; align-items: center; margin-top: 8px;padding: 8px;border-bottom: 1px solid #CACED5;">
        <div class="">
            <img src="https://img.icons8.com/bubbles/50/000000/check-male.png"/>
    </div>
        <div>
            <span style="margin-left: 8px;">@{{item.name}}</span>
            <div>{{item.date}}</div>
        </div>
        <div style="margin-left:auto">
            <img src="https://img.icons8.com/material/24/000000/filled-trash.png"/>
    </div>
        </div>
</div>

【问题讨论】：

如果适合您，请使用来自 Angular Material material.angular.io/components/expansion/overview 的 mat-expansion-panel。希望这会有所帮助。
与上面的评论类似，您可以使用getbootstrap.com/docs/4.4/components/collapse。或者手动，您将使用 javascript： - 添加一个 onClick 函数，该函数更改 div 的显示设置以及两个箭头图像。您可以从中激发灵感：w3schools.com/howto/howto_js_toggle_hide_show.asp

标签： javascript html css angular typescript

【解决方案1】：

首先，删除 hide1 类的样式。 Angular 中最好依赖 *ngIf 指令：

<img *ngIf="item.shown" src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img *ngIf="!item.shown" src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>

然后实现切换显示属性的方法：

toggle(item) {
  item.shown = !item.shown;
}

现在您必须将此方法绑定到 div 包装箭头的 DOM 事件：

<div (click)="toggle(item)">
</div>

最后一步是在要切换的其他元素上使用 *ngIf 指令：

 <div class="d-flex flex-row" *ngIf="item.shown" ...

【讨论】：

【解决方案2】：

HTML5 引入了<summary> 和<details> 标记以允许您切换信息。

这是一个例子：

<details>
<summary>Information you want shown</summary>
<p>Information you want toggled</p>
</details>

【讨论】：