無法在 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}">