html - Bootstrap 侧边栏折叠菜单 :after

Question

我用 Bootstrap 制作了一个折叠菜单，效果很好，但我做不到，所以链接的颜色与按钮的颜色相同:

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