使用 ng 类移动按钮

Moving a button with ng-class

本文关键字：按钮 移动 ng 使用      更新时间：2023-09-26

所以我有这个按钮，当点击它时，应该向右移动 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中查看开发人员视图时，我可以看到hamburgerMenuButtondiv上的类发生了变化，并且添加了属性left：480px;，但它只是不移动。图标确实按预期更改。

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

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

虽然你已经在父div上设置了position:relative;，但碰巧position不是继承的属性;

相关文章：