jquery - 如何使用 css 隐藏嵌套在 level 2 下的所有 li 标签

Question

如何使用 CSS 只显示第一级 li 标签并隐藏其余标签？这样我们只能看到第一层的瓷砖，而第二/第三层的瓷砖被隐藏了。需要明确的是，接下来的想法是，使用 jQuery 使其级联友好，但一次做一件事 :) 请在此处找到我的代码...

如果您有任何问题，请告诉我..

.chartArea {
  padding: 20px 20px 0 0;
}

ul {
  list-style-type: none;
}

a:link,
a:visited,
a:hover,
a:focus,
a:active {
  color: white;
}

.tile {
  margin: 10px;
  padding: 20px;
  background-color: gray;
  font-family: segoe UI;
  color: white;
  min-height: 150px;
}

.empDetails {
  font-size: 14px;
  color: white;
}

ul li:nth-of-type(1) {
display: block;
}

<div class="container-fluid chartArea">
  <ul>
    <li>
      <div class="tile">Adam</div>
    </li>
    <li>
      <div class="tile">
        <div class="col-sm-2 img_tile">
          <img src="http://via.placeholder.com/50x50">
        </div>
        <div class="col-sm-8 empDetails">
          <h4>
              Lily
            </h4>
          <p>
            Director
          </p>
          <p>
            Ensure quality and timely delivery through resource and time management.
          </p>
        </div>
        <div class="col-sm-2 toggle_button">
          <a class="menu-toggle" href="#">
            <span class="glyphicon glyphicon-menu-down"></span>
          </a>
        </div>
      </div>
      <ul>
        <li>
          <div class="tile">
            <div class="col-sm-2 img_tile">
              <img src="http://via.placeholder.com/50x50">
            </div>
            <div class="col-sm-8 empDetails">
              <h4>
              Sen
            </h4>
              <p>
                Manager
              </p>
              <p>
                Ensure quality and timely delivery through resource and time management.
              </p>
            </div>
          </div>
        </li>
        <li>
          <div class="tile">Another Sen</div>
          <ul>
            <li>
              <div class="tile">Sen jr</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="tile">Justin</li>
  </ul>
</div>

Answer 1

因为您定义了一个容器 div ，您必须使用容器类来使用 > 运算符来定位特定级别，添加这两个类将为您完成工作 .chartArea ul li 将隐藏所有级别 li 并且 .chartArea > ul > li { 将仅影响第一级。

.chartArea ul li
{
  display: none;
}

.chartArea > ul > li {
  display: block;
}

.chartArea {
  padding: 20px 20px 0 0;
}

ul {
  list-style-type: none;
}

a:link,
a:visited,
a:hover,
a:focus,
a:active {
  color: white;
}

.tile {
  margin: 10px;
  padding: 20px;
  background-color: gray;
  font-family: segoe UI;
  color: white;
  min-height: 150px;
}

.empDetails {
  font-size: 14px;
  color: white;
}

.chartArea ul li {
  display: none;
}

.chartArea>ul>li {
  display: block;
}

<div class="container-fluid chartArea">
  <ul>
    <li>
      <div class="tile">Adam</div>
    </li>
    <li>
      <div class="tile">
        <div class="col-sm-2 img_tile">
          <img src="http://via.placeholder.com/50x50">
        </div>
        <div class="col-sm-8 empDetails">
          <h4>
            Lily
          </h4>
          <p>
            Director
          </p>
          <p>
            Ensure quality and timely delivery through resource and time management.
          </p>
        </div>
        <div class="col-sm-2 toggle_button">
          <a class="menu-toggle" href="#">
            <span class="glyphicon glyphicon-menu-down"></span>
          </a>
        </div>
      </div>
      <ul>
        <li>
          <div class="tile">
            <div class="col-sm-2 img_tile">
              <img src="http://via.placeholder.com/50x50">
            </div>
            <div class="col-sm-8 empDetails">
              <h4>
                Sen
              </h4>
              <p>
                Manager
              </p>
              <p>
                Ensure quality and timely delivery through resource and time management.
              </p>
            </div>
          </div>
        </li>
        <li>
          <div class="tile">Another Sen</div>
          <ul>
            <li>
              <div class="tile">Sen jr</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="tile">Justin</li>
  </ul>
</div>