Jquery toggleClass 和 CSS 动画 div 宽度答案

【问题标题】：Jquery toggleClass and CSS animate div widthJquery toggleClass 和 CSS 动画 div 宽度
【发布时间】：2016-11-06 19:08:14
【问题描述】：

我正在尝试通过单击鼠标来为相邻的几个 div 的宽度设置动画。点击的 div 应该展开（.slide_active 的样式），而另一个 div 应该缩小（.slide_inactive 的样式）。

<body>
  <div class="slide"></div>
  <div class="slide"></div>
</body>

我想使用 CSS 来设置这些 '.slide' div 的不同状态

.slide {
  float: left;
  height: 200px;
  width: 100px;
  background-color: salmon;
  overflow: hidden;
  -webkit-transition-duration: 0.8s;
}

.slide_active {
  width: 200px;
  background-color: red;
}

.slide_inactive {
  width: 50px;
  background-color: black;
}

所以我也使用 CSS 为更改设置动画，但使用 Jquery 切换不同的类。

$('.slide').click(function() {
  $(this).toggleClass('slide_active');
  if (!$('.slide').hasClass('slide_active')) {
    $('.slide').toggleClass('slide_inactive');
  };
});

它不工作。如果只是对代码的理解有限，似乎无法弄清楚。

我创建了一个 jsfiddle：

https://jsfiddle.net/thomascs/go571dw9/1/

【问题讨论】：

感谢 cmets！我可能会因为过度简化我的问题而让你感到困惑。在我的应用程序中，我使用了 4 个 div 和 3 种可能的状态，或者只有 .slide 或者一个带有 .slide_active 和所有其他的 .slide_inactive。一个 div 的宽度可以是 10%、25% 或 70%。 .filter 让我思考，但我改用了 .not。这是工作代码：jsfiddle.net/thomascs/aj0dvhbm

标签： jquery css

【解决方案1】：

你可以这样做，

$('.parent_slide .slide').on('click', function() {
  $('.parent_slide .slide').addClass('slide_inactive');
  $(this)
  .removeClass('slide_inactive')
  .addClass('slide_active');
});

.slide {
  float: left;
  height: 200px;
  width: 100px;
  background-color: salmon;
  overflow: hidden;
  -webkit-transition-duration: 0.8s;
  cursor: pointer;
}
.slide_active {
  width: 200px;
  background-color: red;
}
.slide_inactive {
  width: 50px;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parent_slide">
  <div class="slide"></div>
  <div class="slide"></div>
</div>

【讨论】：

【解决方案2】：

所以问题是您要检查每张幻灯片是否有 slide_inactive 类，然后在所有幻灯片上切换该类。

让我们稍微修改一下代码：

var $slides = $('.slide');

$slides.click(function() {
    $slides
        .filter('.slide_active') // filter out all active slides
        .removeClass('slide_active'); // set slides to unactive

    $(this).addClass('slide_active'); // set target slide to active
});

【讨论】：

.slide_inactive 类呢？
那么您将在.removeClass('slide_active') 之后添加.addClass('slide_inactive')。但是想一想；当幻灯片没有活动类时，您可以假设它是非活动的。那么，为什么要首先添加另一个类。
因为 OPs 代码似乎具有三种状态，active、inactive 并且两者都没有。我同意只有 2 个状态更有意义，但这不是他所展示的

【解决方案3】：

试试这个，利用hasClass() method检查.slide类是否包含.slide_active类。

$('.slide').click(function() {
	$('.slide').addClass('slide_active');
  	$('.slide').removeClass('slide_inactive');
  if($(this).hasClass('slide_active')){
  	$(this).addClass('slide_inactive');
    $(this).removeClass('slide_active');
  }
});

.slide {
  float: left;
  height: 200px;
  width: 100px;
  background-color: salmon;
  overflow: hidden;
  -webkit-transition-duration: 0.8s;
  transition:width 0.6s ease;
}

.slide_active {
  width: 200px;
  background-color: red;
}

.slide_inactive {
  width: 50px;
  background-color: black;
}

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

【讨论】：

.slide_inactive 类呢？
@RoryMcCrossan 作为 OP 询问他正在尝试在 div 之间切换，因此我们可以更改代码并使用 add 和 removeClass 使它们工作。

【解决方案4】：

感谢cmets！我可能会因为过度简化我的问题而让你感到困惑。在我的应用程序中，我使用了 4 个 div 和 3 种可能的状态，或者只有 .slide 或者一个带有 .slide_active 和所有其他的 .slide_inactive。一个 div 的宽度可以是 10%、25% 或 70%。

.filter 让我思考，但我改用了 .not。

这里是工作代码：jsfiddle.net/thomascs/aj0dvhbm

【讨论】：