2011-07-22 39 views
0

私はかなりうまく機能し、次のスクリプトを持っている:クラスの切り替え?

$(".btnMinimize").live('click', function(event) { 
    event.preventDefault(); 

    $(this).parents(".portlet").find(".portlet-sub-header").toggle(); 
    $(this).parents(".portlet").find(".portlet-content").toggle(); 
    $(this).parents(".portlet").find(".portlet-footer").toggle(); 
}); 

.btnMinimizeは、クラス.portlet-headerとdivタグ内にあります。

このボタンをクリックすると、クリックされるボタンのイメージを切り替えるスタイルシートクラスを切り替えるにはどうすればよいですか?最小化アイコンから最大化アイコンに変更する必要があります。

ボタンは.btnMinimizeに割り当てられます。これは.btnMaximizeに切り替える必要があります。ボタンの状態はデータベースで生成されることに注意してください。つまり、ポートレット1のボタンが最小でポートレット2が最大である場合適切に切り替える必要があります。

これが最善の方法であるかどうかはわかりませんので、より良いアプローチを提案してください。

答えて

0

jQueryのドキュメントから条件を評価し、要素を表示/非表示にする必要があるかどうかを選択します。そうすることで、トグル機能の動作が保証されます。

if (showOrHide == true) { 
    $('#foo').show(); 
} else if (showOrHide == false) { 
    $('#foo').hide(); 
} 

ソース:http://api.jquery.com/toggle/

Personnalyは、私はそれがより柔軟に行うためのその方法を見つけました。あなたはtoggleClassを望むことでしょう

0

$(".btnMinimize").live('click', function(event) { 
    event.preventDefault(); 

    $(this).parents(".portlet").toggleClass('collapse'); 
}); 

そして、いくつかのCSS:

.collapse .portal-sub-header, 
.collapse .portal-content, 
.collapse .portal-footer { 
    display: none; 
} 
関連する問題