Question

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

我的jquery看起来像这样

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

当我点击我的＆＃34;小部件＆＃34;它切换，但它看起来像这样：

class="widget widget.active"

它应该只是widget.active。

Answer 1

class是空格分隔列表，您不能将.放入其中。

如果您有class="widget"，并且想要在class="widget"和class="widget active"之间往返，则只想切换"active"：

$('.widget').toggleClass('active');

那就是说，从更大的角度来看，如果您的目标是让点击的窗口小部件处于活动状态并使任何其他窗口小部件处于非活动状态，toggleClass就不会这样做。你想要：

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

...在您的点击处理程序中：

＆＃13;

$(document).ready(function() {
  $('.widget').click(function() {
    $('.widget').not(this).removeClass("active");
    $(this).addClass("active");
  });
});

＆＃13;

.active {
  color: green;
  font-weight: bold;
}

＆＃13;

<div class="widget active">Widget 1</div>
<div class="widget">Widget 2</div>
<div class="widget">Widget 3</div>
<div class="widget">Widget 4</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

如果您的目标是单独切换小工具，只需$(this).toggleClass("active")：

＆＃13;

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

＆＃13;

.active {
  color: green;
  font-weight: bold;
}

＆＃13;

<div class="widget active">Widget 1</div>
<div class="widget">Widget 2</div>
<div class="widget">Widget 3</div>
<div class="widget">Widget 4</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

toggleClass使两个类都保持不变

1 个答案: