Question

我有2个崩溃链接，test3和test test3已经折叠，因此使用了in 测试未折叠没有in

问题：这只是在第一次打开时发生我不知道为什么，箭头已经在链接test中已经不在了，但是在几次点击之后箭头就会恢复正常工作。

所以测试链接应该是向左箭头，因为还没有折叠，现在如果你看到已经向下箭头，有人知道为什么？

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

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  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: red;
}

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

a {
  text-decoration:none;
}

ul li {
  list-style:none;
}

Answer 1

正如您在CSS中看到的，您的箭头取决于collapsed类（而不是in）。

您应该在链接中添加collapsed课程：

<a class="collapsed" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">test</a>

Answer 2

在class="collapsed"

中插入<a>

当第一次打开时，boostrap侧边栏在图标中折叠

2 个答案: