1

好的，所以我基本上试图实现这一点，如果您单击 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');
      }
    });
4

3 回答 3

1

您可以最小化您的 css isntdry 的 css，只需使用单个默认类作为默认状态，并.Active在 css 中添加一个具有名称的类，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>

于 2018-05-09T22:02:16.800 回答
0

也许这是：

$("[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
});
于 2018-05-09T21:54:51.657 回答
0

稍微调整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;
}
于 2018-05-09T22:11:42.507 回答