Question

我正试图解决这个问题。

我有这段代码

.spectator-chat-title{
    background-color: darken($content-container-bg, 5%);
    height: 30px;
    padding: 3px;
    color: #ddd;
    border-top: 1px solid #1C2337;
    box-shadow: 0px 1px 1px darken($content-container-bg, 10%);
    z-index: 1001;
    position: absolute;
    width: 100%;
    bottom: 0;

    &.collapse{
        bottom: 50px;
    }

}

然后我在我的标记中有这个ng-class方法

<div class="spectator-chat-title" ng-class="{'collapse':chatHide}">
        <i ng-click="chatHide = !chatHide" ng-class="{'fa-angle-double-down':!chatHide, 'fa-angle-double-up':chatHide}" class="fa pull-right"></i>
</div>

当我使用chrome dev工具并将bottom属性更改为50px时，它可以工作。但是当我通过ng-click添加'collapse'类时，该项只是POOFS并消失了。有任何想法吗？ “

Answer 1

通过阅读评论，我不知道为什么项目会消失，但如果你说它可以直接设置底部样式，那么你可以这样做：

<div class="spectator-chat-title" ng-style="{'bottom': chatHide ? '50px' : ''}">

底部css属性使项目消失

1 个答案: