Question

好吧，所以我基本上试图实现这一点，如果你点击div1，这个特定div的宽度变为50％，所有其他div的宽度变化为，比方说2％。（更清楚地参见jsfiddle）

我试图通过给他们一个单独的类来做到这一点，所以点击的div是Online，其余的是Offline。我认为如果我说的话可能会有用; if .. hasClass ..做这个。

最后，我确实设法确实将点击比例扩大到50％，但遗憾的是我把其余部分弄得一团糟。我将包含代码，我希望有人可以向我解释我应该如何继续。我还想到了一个阵列，但不知道如何继续前进。

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>

Answer 2

也许这是：

$("[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
});

Answer 3

轻微调整Muhammad Omer Aslam的答案，以便缩小未点击的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

3 个答案: