Question

大家好我用boostrap做了一个折叠菜单，工作正常，但我不能让那个人和按钮颜色相同：

.collapse-link a:after {
  font-family: 'Glyphicons Halflings';
  content: "\e114";
  color: $white;
  background-color: black;
}

.collapse-link a.collapsed:after {
  content: "\e080";
  background-color: white;
}

我希望class="collapse-link"在右边的按钮中获得与现在相同的背景颜色，因此完整的div将在折叠时跟随按钮颜色，何时不是，现在只是按钮得到背景颜色我想要标题：test3和test获得旁边按钮的背景颜色。

jsfiddle：http://jsfiddle.net/Wc4xt/4377/

HTML：

<div class="sidebar">
  <div class="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li>
        <i class="pull-left fa-lg fa fa-book" aria-hidden="true"></i>
        <div class="collapse-link">
          <a data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">test3
          </a>
        </div>
        <div class="collapse in collapse-styled" id="collapseExample1">
          <i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
          <a href="#">test List</a>
          <i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
          <a href="#">Create</a>
        </div>
      </li>
      <li>
        <i class="pull-left fa fa-lg fa-book" aria-hidden="true"></i>
        <div class="collapse-link">
          <a data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">test
          </a>
        </div>
        <div class="collapse in collapse-styled" id="collapseExample">
          <i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
          <a href="">link List</a>
          <i class="pull-left fa  fa-lg fa-list" aria-hidden="true"></i>
          <a href="">test</a>
        </div>
      </li>
    </ul>
  </div>
</div>

CSS：

.sidebar-wrapper {
  height: 100%;
  overflow-y: auto;
  background: #2f3f4d;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.sidebar-nav li {
  text-indent: 22px;
  line-height: 60px;
  border-bottom: 1px solid #455b6f;
}

.sidebar-nav li a {
  display: block;
  height: 65px;
}

.collapse-link a:after {
  font-family: 'Glyphicons Halflings';
  content: "\e114";
  color: $white;
  background-color: black;
}

.collapse-link a.collapsed:after {
  content: "\e080";
  background-color: white;
}

Answer 1

添加以下css以使其正常工作：

.collapse-link a.collapsed {  
  color: white;
}

a {
  text-decoration:none;
}

ul li {
  list-style:none;
}

同时检查： http://jsfiddle.net/mayankN/Wc4xt/4381/

boostrap侧边栏折叠菜单：之后

1 个答案: