jquery - jQueryでCSSを変更するために要素にトグルを実装するにはどうすればよいですか？

Question

私は次のhtmlを持っています：

<a id="page-width" href="#" class="button">
    <div class="icon sprite-application-text" ></div>
</a>

リンクがクリックされたときに次のようにするにはどうすればよいですか。

1. クラスはに変わります<div class="icon sprite-application-sidebar-list.png" >
2. のオブジェクトに<section id="menu" class="grid_3"></section>はwidth0%
3. に<section id="content" class="grid_9"></section>変更されたオブジェクトclass"grid_12"

そして、もう一度クリックすると、クラスは次のように戻ります。

1. <div class="icon sprite-application-text" >
2. のオブジェクトに<section id="menu" class="grid_3"></section>はwidth23%
3. に<section id="content" class="grid_9"></section>変更されたオブジェクトclass"grid_9"

ある種のトグルアクションが必要ですが、jQueryでこれを実装する方法がわかりませんか？

Answer 1

jQueryのtoggleClass（） APIを確認する必要があります。

これを使用して、クラスを簡単に切り替えることができます。また、幅を変更するために、いくつかのcssクラスで定義できるため、切り替えたときに目的の幅が設定されます。

Answer 2

$(".icon sprite-application-text").removeClass("icon
sprite-application-text").addClass("icon
sprite-application-sidebar-list.png");

$(".icon sprite-application-sidebar-list.png").removeClass("icon
sprite-application-sidebar-list.png").addClass("icon
sprite-application-text");
if ($("#menu").width() == 0) 
{
   $("#menu").width("23%");
   $("#content").removeClass("grid-9").addClass("grid-12");
}
else
{
   $("#menu").width("0");
   $("#content").removeClass("grid-12").addClass("grid-9");
}