Question

当我使用仅使用CSS的data-toggle =“collapse”来切换菜单时，我希望我的字形旋转。我已经让它工作了，但是glyphicons面对错误的方式开始，直到你打开，然后关闭，它工作正常。

这是我第一次加载页面时的显示方式（应该面向右侧）： http://puu.sh/cKGnV/765032b612.png

当我打开菜单时，它们保持不变，这是正确的，如上所述。然后，一旦我关闭它们，它们面向右边，这也是正确的方式。

以下是我网站上的一个示例：http://ncoll-central.com/example

.toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: #999999;
    margin-right: 15px;
}

.toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";
}

<div id="sidebar-wrapper">
  <ul class="sidebar-nav">
    <li class="sidebar-brand">
      <a href="#">Heading</a>
    </li>
    <li><a href="#">Home</a></li>
    <li>
      <a class="toggle" data-toggle="collapse" href="#collapseOne">Menu 1</a>
      <div id="collapseOne" class="collapse sub-item">
        <div class="list-group">
          <a href="#">Empty</a>
          <a href="#">Empty</a>
          <a href="#">Empty</a>
        </div>
      </div>
    </li>
    <li>
      <a class="toggle" data-toggle="collapse" href="#collapseTwo">Menu 2</a>
      <div id="collapseTwo" class="collapse sub-item">
        <div class="list-group">
          <a href="#">Empty</a>
          <a href="#">Empty</a>
          <a href="#">Empty</a>
        </div>
      </div>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

从我所知道的，就好像代码将它们识别为默认情况下它们被扩展，而实际上它们不是。

有没有一个简单的解决方案，我错过了什么？我更喜欢只使用CSS。谢谢！

解决方案：

 <a class="toggle collapsed" data-toggle="collapse" href="#collapseOne">Menu 1</a>

就像在元素中添加collapsed一样简单。

Answer 1

<强>解决方案：

 <a class="toggle collapsed" data-toggle="collapse" href="#collapseOne">Menu 1</a>

这就像向元素添加collapsed一样简单。

Bootstrap Glyphicons在Data Toggle Collapse上旋转

1 个答案: