javascript - 在 Jquery 中切换/添加/删除类未按预期工作

Question

在我的代码中，我有两个框，我希望当我点击框时它应该获得一些宽度，当我点击另一个框时它应该获得宽度并从前一个框移除额外的宽度。我已成功完成此操作，但是当我再次单击额外宽度框时，它并没有删除它的额外宽度。

$('.dos').click(function() {
  $(this).toggleClass('clicked');
});

$('.dos').click(function() {
  $('.dos').removeClass('clicked');
  $(this).addClass('clicked');
});

#box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  transition: width 1s;
}

#box.clicked {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class="dos"></div>
<div id="box" class="dos"></div>

只是想要切换类也应该与 addClass 和 removeClass 一起使用

( Demo on jsfiddle.net )

Answer 1

检查更新的 fiddle并尝试

$(this).toggleClass('clicked').siblings().removeClass('clicked');   

演示

$('.dos').click(function() {
    $(this).toggleClass('clicked').siblings().removeClass('clicked');    
});

#box {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc; 
    transition: width 1s;
}

#box.clicked {
    width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class="dos"></div>
<div id="box" class="dos"></div>