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>更改为 aclass的对象"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>更改为 aclass的对象"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");
}