Javascript 单击可缩放多个div

好的，我基本上是想实现，如果你点击div1，这个特定div的宽度会变为50%，其他所有div的宽度都会变为，比如说2%。（请参阅JSFIDLE以了解更多信息）

我尝试给他们一个单独的类来实现这一点，因此单击的div是在线的，其余的是离线的。我想如果我说这样的话可能会有用；如果。。hasClass。。这样做

最后，我成功地将div的点击率提升到了50%，但遗憾的是，我把其余的部分弄得一团糟。我将包括代码，我希望有人能向我解释我应该如何继续。我也想到了一个阵列，但不知道如何继续进行

一,

二,

三,

四,

也许这是：

$("[class^='sliding-panel']" ).click(function(){        //selector part of class name
    $("[class^='sliding-panel']" ).addClass("Offline").removeClass("Active"); //for all  
    $(this).addClass("Active").removeClass("Offline");                         //for this element
});

---

您可以最小化css您的css不是干的，只需使用一个默认类作为默认状态，并使用

transition

属性在css中添加一个名为

.Active

的类，您不必编写太多jquery代码来控制宽度和高度，相反，您可以添加或删除

.Active

类，如果需要，请参阅下面的演示

$（.container div”）。在（'click'，函数（e）{
var$this=$（this）；
$（“.container div”）.filter（函数（）{
return！$（this）.is（$this）；
}).removeClass（'Active'）.addClass（'Offline'）；
$this.removeClass（'Offline'）.addClass（'Active'）；
});
*，
*：之前，
*：之后{
保证金：0；
框大小：边框框；
}
身体，
html{
身高：100%；
}
.集装箱{
位置：相对位置；
宽度：100%；
身高：100%；
背景颜色：灰色；
}
.小组{
宽度：9%；
浮动：左；
高度：100vh；
背景色：红色；
边框：1px黑色实心；
}
.主动{
宽度：50%；
过渡：1s线性；
}
.离线{
宽度：5%；
过渡：1s线性；
}

1.
对的答案进行轻微调整，以缩小未点击的div，而不是将其推离屏幕（如果我认为正确的话）：

脚本：

$(".container div").on('click', function() {
    $(".container div").removeClass('Active');
    $(".container div").addClass('Inactive');
    $(this).removeClass('Inactive');
    $(this).addClass('Active');
});

在他的css中附加：

.Inactive {
  width: 2%;
  transition: 1s linear;
}

你想让它只出现在第一个div中，还是所有div的动作都一样？所有div的动作都应该一样。谢谢你的提醒，我已经在编辑它了，它被添加为
。离线
类，因为它已经在OP中使用了，无论如何，谢谢这看起来非常干净。非常感谢。除此之外,；我现在可以使用的代码要少得多。以这种方式添加和删除类非常有意义。我不知道为什么我以前这么费劲地想这件事。非常感谢您的解决方案！
var elements = document.getElementsByClassName('Offline');
for (var i = 0; i < elements.length; i++) {
    elements[i].style.widht='2%';
    elements[i].style.height='100%';
}

$(".sliding-panel1").click(function(){
      $("#selectedwhip").addClass("active");
    });

    $(function() {
      if ($("#selectedwhip").hasClass("active")) {
        console.log('active');
      }
      else {
        console.log('unactive');
      }
    });

$("[class^='sliding-panel']" ).click(function(){        //selector part of class name
    $("[class^='sliding-panel']" ).addClass("Offline").removeClass("Active"); //for all  
    $(this).addClass("Active").removeClass("Offline");                         //for this element
});

$(".container div").on('click', function() {
    $(".container div").removeClass('Active');
    $(".container div").addClass('Inactive');
    $(this).removeClass('Inactive');
    $(this).addClass('Active');
});

.Inactive {
  width: 2%;
  transition: 1s linear;
}