Question

我有一个使用Bootstrap的可折叠列表，当内容折叠时我无法实现图标的更改。我尝试过这篇文章：http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp，但我不知道如何定义&:before.collapse.in css类来改变它。

有人可以帮帮我吗？

HTML：

 <ul class="ls-nav">
          <li><!--
            --><a role="button" data-toggle="collapse" href="#collapseContent" aria-expanded="true" aria-controls="collapseContent"><!--
             -->Lorem ipsum
            </a>
            <div class="collapse" id="collapseContent">
              <ul class="ls-inner">
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
                <li>
                  <a role="button" data-toggle="collapse" href="#collapseContent-2" aria-expanded="true" aria-controls="collapseContent-2"><!--
                   -->Lorem ipsum
                   </a>
                   <div class="collapse" id="collapseContent-2">
                  <ul class="ls-inner-dot">
                    <li class="active">Lorem ipsum</li>
                    <li>Lorem ipsum</li>
                  </ul>
                  </div>
                </li>
                <li>Lorem ipsum</li>
              </ul>
            </div>
          </li>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
        </ul>

scss / css：

  .ls-nav {
    }
    li {
        list-style: none;    
        &:before {
            font-family: 'Fonticons';
            content: "\f009";
        }
        &:before .collapse.in {
            content: "\f00a"
        }
    }
    .ls-inner {
        padding-left: 15px;
        li {
            &:before {
                font-size: 0.6rem;
                line-height: 0.8rem;
                vertical-align: middle;
            }
        }
        .ls-inner-dot {
            padding-left: 15px;
            .active {
                color: $color_sail_approx;
            }
            li:before {
                content: "●";
            }
        }
    }
}

Answer 1

您无法在:before或:after等伪选择器之后定位CSS类。

此外，如果您需要纯CSS解决方案，则需要更改HTML标记以便能够定位元素。

如果您像这样使用它，它可以工作：

<div class="ls-nav">
<div class="panel-group" role="tablist">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="collapseListGroupHeading1">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="false" aria-controls="collapseListGroup1">
            Collapsible list group
          </a>
        </h4>
      </div>
      <div id="collapseListGroup1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
        <ul class="list-group">
          <li class="list-group-item">Bootply</li>
          <li class="list-group-item">One itmus ac facilin</li>
          <li class="list-group-item">Second eros</li>
        </ul>
        <div class="panel-footer">Footer</div>
      </div>
    </div>
  </div>
</div>

CSS：

  .ls-nav .panel a.collapsed:before {
     font-family: FontAwesome;
     content:"\f07b";
  }
  .ls-nav .panel  a:before {
     font-family: FontAwesome;
     content:"\f07c";
  }

Working Example

折叠时Bootstrap 3导航/列表更改图标

1 个答案: