文章/答案/技术大牛

发布

社区首页 >问答首页 >无法在UL + LI (CSS)中隐藏HTML

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

Stack Overflow用户

提问于 2020-06-22 07:51:37

回答 5查看 309关注 0票数 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>

知道该怎么做吗？

谢谢!

hide

html

css

list

回答 5

Stack Overflow用户

发布于 2020-06-22 09:11:39

演示为了避免查看源代码，您应该使用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中使用管道

<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>

票数 2

Stack Overflow用户

发布于 2020-06-22 08:00:10

试试这个CSS：

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

检查密码

票数 1

Stack Overflow用户

发布于 2020-06-22 08:21:07

你的目标是不可能的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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62509744

复制

相似问题

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

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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