Jquery toggleClass使两个类保持不变

基本上我的问题很简单， 我有两个类，我的类widget和widget.active。 Widget.active扩展宽度，使其可见

我的jquery看起来像这样

    $(document).ready(function () {
        $('.widget').click(function () {
            $('.widget').toggleClass('widget.active');
        });
    });

当我单击我的“小部件”时，它会切换，但看起来是这样的：

class="widget widget.active"

---

而且它应该是widget.active。

类是一个空格分隔的列表，您不能将
放入其中

如果您有
class=“widget”
，并且希望在
class=“widget”
和
class=“widget active”
之间来回切换，则只需切换
“active”
：

这就是说，从更大的角度来看，如果您的目标是使单击的小部件处于活动状态，而使任何其他小部件处于非活动状态，
toggleClass
将无法做到这一点。你会想要：

$('.widget').not(this).removeClass("active");
$(this).addClass("active");

…在单击处理程序中：


$（文档）.ready（函数（）{
$（'.widget'）。单击（函数（）{
$（'.widget'）.not（this.removeClass（“active”）；
$（此）.addClass（“活动”）；
});
});
.active{
颜色：绿色；
字体大小：粗体；
}
Widget 1
小部件2
小部件3
小部件4
类
是一个空格分隔的列表，您不需要将
放在其中

如果您有
class=“widget”
，并且希望在
class=“widget”
和
class=“widget active”
之间来回切换，则只需切换
“active”
：

这就是说，从更大的角度来看，如果您的目标是使单击的小部件处于活动状态，而使任何其他小部件处于非活动状态，
toggleClass
将无法做到这一点。你会想要：

$('.widget').not(this).removeClass("active");
$(this).addClass("active");

…在单击处理程序中：


$（文档）.ready（函数（）{
$（'.widget'）。单击（函数（）{
$（'.widget'）.not（this.removeClass（“active”）；
$（此）.addClass（“活动”）；
});
});
.active{
颜色：绿色；
字体大小：粗体；
}
Widget 1
小部件2
小部件3
小部件4
您甚至不能在
css
中设置class
widget.active的样式，因为您的选择器
.widget.active
将查找包含这两个类的元素。这是无效的类name@itsgoingdown：您可以（
.widget\.active{/*…*/}
），但这不是一个好主意。：-）您甚至不能在
css
中设置class
widget.active
的样式，因为选择器
.widget.active
将查找包含这两个类的元素。这是无效的类name@itsgoingdown：您可以（
.widget\.active{/*…*/}
），但这不是一个好主意。：-）