如何在元素上实现切换以使用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>的对象的width为0%
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>的对象的width为23%
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");
}