logo标签列表

无法在UL + LI中隐藏HTML（CSS）

htmlcsslisthide
4

有人能够看出或想到为什么我无法隐藏第5个项目及以后的项目吗？

我想只显示前四个项目（即＃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>

有什么想法可以实现这个吗？

谢谢！

为什么不尝试在要显示的列表项上添加类，以及其他你想要隐藏的类。 - Siful Islam
4
客户端无法从源代码中删除任何内容。你只能操作DOM，而DOM是由浏览器从源代码构建的。 - Turnip
当运行您的代码片段时，项目会按预期隐藏。问题必须出在其他地方。 - Smlok
1
你没有做错任何事情，只是你对CSS的理解似乎有误。 - CBroe
在Angular中，你不应该使用document.querySelector或其他DOM相关的东西。这是Angular的特性。请查看我的答案中的演示。你应该使用Angular指令，如ngIf、pipe等... @henry - mr. pc_coder
5个回答
2

演示 如果想要隐藏不想让别人看到的内容，应该使用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"}
  ]

这是一个管道的示例

创建自定义管道

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>
1
尝试使用以下CSS：

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

在 CodePen 上查看

这不会从源代码中删除HTML，这正是OP所询问的。 - Turnip
使用CSS无法删除，但可以隐藏。 - Siful Islam
基本上来说，完全隐藏HTML是不可能的吗？我以为可以... - Henry
你可以使用 JavaScript 来完成。 - Siful Islam
0

使用CSS无法实现您的目标！ CSS仅用于样式化DOM内容，而不是操作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>

谢谢你，@sam - 我这么做的原因是为了“提供一个样本”，实际数据是通过 PHP（通过循环）发送的，因此实际上 PHP 可以将数据限制为每个循环仅 4 条...如果这有意义的话。 - Henry
很遗憾，我不明白你的意思，但这并不重要。就算你不给我解释，也没有关系。如果我的 JavaScript 代码片段能帮到你，我会很高兴的。如果我已经满意地回答了你的问题，那么请点一下那个绿色的勾勾吧。;-) - Sam
0

这是我在SO上的第一个答案，上面的人已经清楚地给出了解决方案，但这里有另一种实现相同结果的方法。

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

我会简单地使用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;
}

您也可以使用引导类d-none替换hide：

<li *ngFor="let user of users; let i = index" [ngClass]="{'d-none': i>3}">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接