用ng-class移動一個按鈕

所以我有這個按鈕，點擊後應該向右移動480px並更改圖標。我正在使用Angular JS和改變圖標的作品，但按鈕不動。用ng-class移動一個按鈕

我這是我的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;被添加，但它只是不動。圖標確實如預期改變。

來源

2016-02-09 larzz11

這根本不起作用。該圖標完全消失，所以即使menuClosed類也不會在加載頁面時發生。 – larzz11

這與角度無關，你的類正在被應用。我會看看自己的CSS，假裝角度甚至沒有。 – ste2425

將position:relative;或position:inherit;加到.hamburgerMenuButton。

它沒有移動，因爲它的位置設置爲默認值static。 left對元素沒有任何意義。

雖然你已經在父div上設置了position:relative;，但恰巧position is not an inherited property;

來源

2016-02-09 08:06:40 JNF

用ng-class移動一個按鈕

回答

相關問題