0

私は次の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でこれを実装する方法がわかりませんか？

4

2 に答える 2

0

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

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

于 2012-07-01T05:44:03.733 に答える
-1 
$(".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");
}
于 2012-07-01T05:43:45.200 に答える