Question

所以我有这个按钮，当点击它时，应该向右移动480px并更改图标。我正在使用Angular JS并且图标的更改有效，但按钮不会移动。

这是我的HTML：

<div id="menuButton" ng-click="toggleMenu()">
    <div class="hamburgerMenuButton" ng-class="menu.shown ? 'menuOpen' : 'menuClosed'">

    </div>
</div>

CSS：

#menuButton {
    width:52px;
    height: 50px;
    padding: 10px;
    z-index: 1000;
    position: relative;
}

#menuButton:hover {
    background-color: #02CDED;
    border-color: #FFFFFF;
}

.hamburgerMenuButton {
    width: 32px;
    height: 30px;
}

.menuOpen {
    left: 480px;
    background-image: url('images/arrow.png');
} 

.menuClosed {
    background-image: url('images/hamburger.png');
}

当我查看Chrome中的开发人员视图时，我可以看到该类在hamburgerMenuButton div上更改，并且属性为left：480px;添加，但它只是不移动。图标确实会按预期更改。

Answer 1

将position:relative;或position:inherit;添加到.hamburgerMenuButton。

它没有移动，因为它的位置设置为static，默认情况下。 left对元素没有任何意义。

虽然您已在父position:relative;上设置div，但恰好position is not an inherited property;

使用ng-class移动按钮

1 个答案: