无法在 UL + LI (CSS) 中隐藏 HTML

Question

谁能看到或想到为什么我不能从第 5 项开始隐藏项目？

我只想显示 rest 全部隐藏的项目#1、#2、#3 和#4（即完全隐藏在代码中）。

我可以从客户端视图中隐藏它们，但查看源代码你可以看到 HTML - 我在这里做错了什么？

我努力了：

visibility: hidden 

也

display: none

仍然，代码在那里......

 ul>li { display: inline-block; /* You can also add some margins here to make it look prettier */ width: 180px; zoom: 1; *display: inline; /* this fix is needed for IE7- */ } ul>li:nth-of-type(1n+5) { display: none; }.speakercard { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 180px; margin: auto; text-align: center; padding-top: 14px; } button { border: none; outline: 0; display: inline-block; padding: 10px; color: white; background-color: #393939; text-align: center; cursor: pointer; width: 100%; } a { text-decoration: none; color: black; } button:hover, a:hover { opacity: 0.7; }.image-cropper { width: 100px; height: 100px; position: relative; overflow: hidden; border-radius: 50%; border: 1px solid #ccc; margin-left: auto; margin-right: auto; }.profile-pic { display: inline; margin: 0 auto; height: 100%; width: auto; }

 <ul> <li> <div class="speakercard"> <div class="image-cropper"> <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%"> </div> <p>1 Poo Doe</p> <p><button>Speaker Profile</button></p> </div> </li> <li> <div class="speakercard"> <div class="image-cropper"> <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%"> </div> <p>2 Doe</p> <p><button>Speaker Profile</button></p> </div> </li> <li> <div class="speakercard"> <div class="image-cropper"> <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%"> </div> <p>3 Doe</p> <p><button>Speaker Profile</button></p> </div> </li> <li> <div class="speakercard"> <div class="image-cropper"> <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%"> </div> <p>4 Doe</p> <p><button>Speaker Profile</button></p> </div> </li> <li> <div class="speakercard"> <div class="image-cropper"> <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%"> </div> <p>THIS SHOULD BE TOTALLY HIDDEN</p> <p><button>Speaker Profile</button></p> </div> </li> <li> <div class="speakercard"> <div class="image-cropper"> <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%"> </div> <p>THIS SHOULD BE TOTALLY HIDDEN</p> <p><button>Speaker Profile</button></p> </div> </li> <li> <div class="speakercard"> <div class="image-cropper"> <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%"> </div> <p>THIS SHOULD BE TOTALLY HIDDEN</p> <p><button>Speaker Profile</button></p> </div> </li> </ul>

知道如何做到这一点吗？

谢谢！

Answer 1

演示要从查看源代码中隐藏，您应该使用ngIf指令而不是css

或者您可以使用自定义pipe来展示您想要的内容。

或者您可以连接到ngFor您的元素并过滤与您想要的内容相关的列表。

css刚申请设计。 它适用于用户视图

对于 ngIf 你的 html

<ul>
  <ng-container *ngFor="let data of personels;let i = index;">
    <li *ngIf="i<4">
      <div class="speakercard">
        <div class="image-cropper">
          <img src="{{data.img}}" class="profile-pic" alt="" style="width:100%">
        </div>
        <p>{{data.id}} {{data.Name}}</p>
        <p><button>Speaker Profile</button></p>
      </div>
    </li>
  </ng-container>
</ul>

在 component.ts 中只创建你的数组

personels=[
    {id:1,Name:"Poo Doe",img:"image1"},
    {id:2,Name:"Poo Doe",img:"image1"},
    {id:3,Name:"Poo Doe",img:"image1"},
    {id:4,Name:"Poo Doe",img:"image1"},
    {id:5,Name:"Poo Doe",img:"image1"},
    {id:6,Name:"Poo Doe",img:"image1"},
    {id:7,Name:"Poo Doe",img:"image1"}
  ]

这是 pipe示例

创建自定义 pipe

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'customPipe'
})

export class CustomPipe implements PipeTransform {
  transform(row: any[],n:number): any {
      return row.filter((x,idx)=>idx<n);       
  }
}

并在 html 中使用 pipe

<ul>
    <li *ngFor="let data of personels|customPipe:4">
      <div class="speakercard">
        <div class="image-cropper">
          <img src="{{data.img}}" class="profile-pic" alt="" style="width:100%">
        </div>
        <p>{{data.id}} {{data.Name}}</p>
        <p><button>Speaker Profile</button></p>
      </div>
    </li>
</ul>

Answer 2

试试这个 CSS：

li {
  display: none;
}
li:nth-child(-n+3) {
  display: block;   
}

检查代码笔

Answer 3

CSS 无法实现您的目标，CSS 仅用于设置 DOM 内容的样式。 不是为了篡改后者，如果您真的想删除扬声器配置文件 4 之后的项目，那么您将不得不使用 JavaScript 来执行此操作。 JavaScript 可以在客户端操作 DOM，但是你为什么要发送配置文件呢？ 如果你想在之后删除它们？ 不将它们发送给您的客户不是更容易吗？

但是，如果您想这样做，那么您可以通过以下方式实现您想要的结果。

 let speakercards = document.querySelectorAll('.speakercard'); for (let i = 0; i < speakercards.length; ++i) { if (i >= 4) { speakercards[i].remove() } }

 ul>li { display: inline-block; /* You can also add some margins here to make it look prettier */ width: 180px; zoom: 1; *display: inline; /* this fix is needed for IE7- */ } /* ul>li:nth-of-type(1n+5) { display: none; } */.speakercard { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 180px; margin: auto; text-align: center; padding-top: 14px; } button { border: none; outline: 0; display: inline-block; padding: 10px; color: white; background-color: #393939; text-align: center; cursor: pointer; width: 100%; } a { text-decoration: none; color: black; } button:hover, a:hover { opacity: 0.7; }.image-cropper { width: 100px; height: 100px; position: relative; overflow: hidden; border-radius: 50%; border: 1px solid #ccc; margin-left: auto; margin-right: auto; }.profile-pic { display: inline; margin: 0 auto; height: 100%; width: auto; }

 <ul> <li> <div class="speakercard"> <div class="image-cropper"> <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%"> </div> <p>1 Poo Doe</p> <p><button>Speaker Profile</button></p> </div> </li> <li> <div class="speakercard"> <div class="image-cropper"> <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%"> </div> <p>2 Doe</p> <p><button>Speaker Profile</button></p> </div> </li> <li> <div class="speakercard"> <div class="image-cropper"> <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%"> </div> <p>3 Doe</p> <p><button>Speaker Profile</button></p> </div> </li> <li> <div class="speakercard"> <div class="image-cropper"> <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%"> </div> <p>4 Doe</p> <p><button>Speaker Profile</button></p> </div> </li> <li> <div class="speakercard"> <div class="image-cropper"> <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%"> </div> <p>THIS SHOULD BE TOTALLY HIDDEN</p> <p><button>Speaker Profile</button></p> </div> </li> <li> <div class="speakercard"> <div class="image-cropper"> <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%"> </div> <p>THIS SHOULD BE TOTALLY HIDDEN</p> <p><button>Speaker Profile</button></p> </div> </li> <li> <div class="speakercard"> <div class="image-cropper"> <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%"> </div> <p>THIS SHOULD BE TOTALLY HIDDEN</p> <p><button>Speaker Profile</button></p> </div> </li> </ul>

Answer 4

这是我对 SO 的第一个答案，上面的人清楚地为您提供了解决方案，但这是实现相同结果的另一种方法。

let myobj = document.querySelectorAll("ul > li:nth-of-type(1n+5)");
Array.from(myobj).map((el)=>el.remove()) 

Answer 5

我会简单地使用 ngClass 指令：

 <ul>
  <li *ngFor="let user of users; let i = index" [ngClass]="{'hide': i>3}">
    <div class="speakercard">
      <div class="image-cropper">
        <img src="{{user.img}}" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>{{user.id}} {{user.name}}</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>
  </ul>

CSS：

.hide{
display:none;
}

您还可以将 hide 替换为 bootstrap class d-none：

<li *ngFor="let user of users; let i = index" [ngClass]="{'d-none': i>3}">