前端之家

  1. 首页
  2. 问答

如何格式化可折叠内容中的无序列表 注意：

• 问答

我在可折叠内容div内的无序列表有一点问题。 div崩溃时，列表显示时没有任何样式。但是，在div完全崩溃之后，我的css接管了它，并以样式显示。

我将在此处添加整个代码。如果单击“我的路线”，您将了解我在说什么。解释起来有点棘手。

谢谢， 理查德。

* {
  font-family: 'Roboto',sans-serif;
}


/* Every CSS rule for the Sidebar and it's contents */

.sidebar {
  height: 100vh;
  background-color: #fff;
}

.collapse {
  font-size: 14px;
}

.collapse ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.collapse ul li {
  padding: 7px;
  border-radius: 4px;
  border-bottom: 1px solid #E2E6EA;
}

.collapse ul li:hover {
  background-color: #e2e6ea;
}

.collapse i {
  cursor: pointer;
  margin-left: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-KA6wR/X5RY4zFAHpv/CnoG2UW1uogYfdnP67Uv7eULvTveboZJg0qUpmJZb5VqzN" crossorigin="anonymous">

<!-- jQuery first,then Popper.js,then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnqq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmvgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="sidebar col-3">
      <button type="button" class="btn btn-light btn-md btn-block" data-toggle="collapse" data-target="#myroutes">My Routes</button>
      <div id="myroutes" class="collapse">
        <div class="mt-4 mb-4">
          <ul>
            <li>
              10/29/19 - Montgomery & Butler County
              <i class="far fa-edit"></i>
              <i class="far fa-trash-alt"></i>

            </li>
            <li>
              10/12/19 - Clinton & Highland County
              <i class="far fa-edit"></i>
              <i class="far fa-trash-alt"></i>
            </li>
            <li>
              10/05/19 - Indiana
              <i class="far fa-edit"></i>
              <i class="far fa-trash-alt"></i>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

wuzongzhi 回答：如何格式化可折叠内容中的无序列表 注意：

这是因为您要基于父类将样式应用于列表，而父类具有collapse类，该类在折叠事件中不会出现，而仅在完成时才会出现。更好的方法是将一个类添加到列表<ul class="my-styled-list">中，然后使用.my-styled-list { ... }

在您的CSS中定位该类 ,

尝试此100％即可。.！

ul{
    list-style-type: none;
}

enter image description here

,

您的无序列表ul的样式取决于在父元素上定义的.collapse类。

div崩溃时不应用的原因是，在这种情况下，collapse上的collapsing被div替换了。

请参阅组件 Collapse - Bootstrap 文档。

您可以在此处执行几种实现，但是对我来说最有意义的一种是定义并应用说明collapsing的样式-说明该状态变化。

也就是说，在为collapse声明样式选择器的任何地方，还应该为collapsing声明样式选择器。

* {
  font-family: 'Roboto',sans-serif;
}


/* Every CSS rule for the Sidebar and it's contents */

.sidebar {
  height: 100vh;
  background-color: #fff;
}

.collapse,.collapsing {
  font-size: 14px;
}

.collapse ul,.collapsing ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.collapse ul li,.collapsing ul li {
  padding: 7px;
  border-radius: 4px;
  border-bottom: 1px solid #E2E6EA;
}

.collapse ul li:hover,.collapsing ul li:hover {
  background-color: #e2e6ea;
}

.collapse i,.collapsing i {
  cursor: pointer;
  margin-left: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-KA6wR/X5RY4zFAHpv/CnoG2UW1uogYfdnP67Uv7eULvTveboZJg0qUpmJZb5VqzN" crossorigin="anonymous">

<!-- jQuery first,then Popper.js,then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="sidebar col-3">
      <button type="button" class="btn btn-light btn-md btn-block" data-toggle="collapse" data-target="#myroutes">My Routes</button>
      <div id="myroutes" class="collapse">
        <div class="mt-4 mb-4">
          <ul>
            <li>
              10/29/19 - Montgomery & Butler County
              <i class="far fa-edit"></i>
              <i class="far fa-trash-alt"></i>

            </li>
            <li>
              10/12/19 - Clinton & Highland County
              <i class="far fa-edit"></i>
              <i class="far fa-trash-alt"></i>
            </li>
            <li>
              10/05/19 - Indiana
              <i class="far fa-edit"></i>
              <i class="far fa-trash-alt"></i>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

注意：

在font-size（和div.collapse）上声明的某些样式（例如div.collapsing）被其子元素继承，因此在此也要加以考虑。

csshtml
本文链接：https://www.f2er.com/3162502.html

大家都在问