2015-09-04 71 views
1

所以基本上我的頁面上有一個控件,點擊時需要用兩個不同的CSS類切換兩個不同的元素。用AngularJS添加/切換CSS

我設法讓它切換控件之一,但不是兩個。

這裏是我的元素:

這是需要觸發這兩個控件的元素。

<a id="main-menu-toggle" data-toggle="collapse" data-target="#sidebar" class="hidden-xs open"><i class="fa fa-bars"></i></a> 

的第一個元素(即正在工作):

<div id="sidebar" class="col-lg-2 col-sm-1 collapse" style="min-height: 759px; display: block;"> 

</div> 

這裏是第二元件(即我需要添加):

對於此元素i需要當點擊按鈕時觸發CSS類'full',然後再次點擊時未觸發CSS類。

<div id="content" class="col-lg-10 col-sm-11 full"> 

</div> 

我試圖做到這一點的超鏈接控制,它仍然不工作:

<a id="main-menu-toggle" data-toggle="collapse,full" data-target="#sidebar,#content" class="hidden-xs open"><i class="fa fa-bars"></i></a> 

有誰知道我能得到這個使用AngularJS工作?

回答

0

這裏是一個JSFiddle usign ng-classng-click

<a id="main-menu-toggle" data-toggle="collapse" data-target="#sidebar" class="hidden-xs open" ng-click="clicked = (clicked) ? false : true"> 
    <i class="fa fa-bars"></i>click 
</a> 

<div id="sidebar" class="col-lg-2 col-sm-1 collapse" ng-class="{'full': clicked}" style="min-height: 759px; display: block;"> 
    THEDIV 
</div> 
+0

當我點擊時沒有發生在小提琴上? –

+0

檢查元素,你會看到它添加並刪除'full'類編輯:向類添加顏色以顯示內容http://jsfiddle.net/michelem09/smebrtwt/1/ –

+0

是的,它顯示並隱藏紅色框,但我希望它在同一時間做兩件不同的事情。 –