javascript - 单击时缩放多个 div

Question

好的，所以我主要是想实现如果您单击 div1，此特定 div 的宽度将更改为 50%，而所有其他 div 的宽度将更改为，比方说 2%。 (请参阅 jsfiddle 以获得更清晰的信息)

我试图通过给他们一个单独的类来做到这一点，所以被点击的 div 是在线的，其余的是离线的。我想如果我再说类似的话可能会奏效；如果 .. hasClass .. 这样做。

最后，我确实设法将点击时的 div 缩放到 50%，但遗憾的是我把其余部分弄得一团糟。我包括代码，我希望有人能向我解释我应该如何进行。我也想到了一个数组，但不知道如何推进。

https://jsfiddle.net/6cjmshrq/

1

$(".sliding-panel1").click(function(){
  $(".sliding-pane2").addClass("Active");
  $(".sliding-pane2").addClass("Offline");
  $(".sliding-pane3").addClass("Offline");
  $(".sliding-pane4").addClass("Offline");
  $(".sliding-pane5").addClass("Offline");
  $(".sliding-pane6").addClass("Offline");
  $(".sliding-pane7").addClass("Offline");
  $(".sliding-pane8").addClass("Offline");
  $(".sliding-pane9").addClass("Offline");
  $(".sliding-pane10").addClass("Offline");
  $(".sliding-pane11").addClass("Offline");
});

2

$(".sliding-panel1").click(function(){
  if ( $(this).hasClass("Active") ) {
    $(this).animate({
      width: '9%',
      height: '100%'
    });
  } else {
    $(this).animate({
      width: '50%',
      height: '100%'
    });
  }
  $(this).toggleClass("Active");
});

3

$(function(){
    $('.sliding-panel1').click(function(){


             $(".container").children().each( function(){

              if (!$(this).hasClass('Active') ){
                $(this).animate({
                  width: '9%'
              })
              else {
                $(this).animate({
                  width: '50%'
              })                
};

4

var elements = document.getElementsByClassName('Offline');
for (var i = 0; i < elements.length; i++) {
    elements[i].style.widht='2%';
    elements[i].style.height='100%';
}

5

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

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

Answer 1

你可以最小化 css 你的 css 不是干的，只需为默认状态使用一个默认类，并在 css 中添加一个名称为 .Active 的类，并使用 transition属性，您也不必编写那么多 jquery 代码来控制宽度和高度，而是添加或删除 .Active 类，如果您想要的话，请参阅下面的演示

$(".container div").on('click', function(e) {
  var $this = $(this);
  $(".container div").filter(function() {
    return !$(this).is($this);
  }).removeClass('Active').addClass('Offline');
  
  $this.removeClass('Offline').addClass('Active');
});

*,
*:before,
*:after {
  margin: 0;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: grey;
}

.panels {
  width: 9%;
  float: left;
  height: 100vh;
  background-color: red;
  border: 1px black solid;
}

.Active {
  width: 50%;
  transition: 1s linear;
}

.Offline {
  width: 5%;
  transition: 1s linear;
}

<div class="container">
  <div class="panels">1
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>