Question

我正试图通过鼠标点击动画显示彼此相邻的几个div的宽度。单击的div应该展开（样式为.slide_active），另一个div应该缩小（样式为.slide_inactive）。

guard 'minitest', cmd: 'spring rake test' do
  watch('company.rb') { 'company_test.rb' }
  watch('company_test.rb')
enв

我想用CSS来设置这些'.slide'divs

的不同状态

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

所以我也使用CSS为变化设置动画，但是使用Jquery来切换不同的类。

.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;
}

它不起作用。如果对代码只有有限的理解，似乎无法解决这个问题。

我创建了一个jsfiddle：

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

Answer 1

所以问题是你要检查每个幻灯片是否有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
});

Answer 2

试试这个，利用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>

Answer 3

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

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

以下是工作代码：jsfiddle.net/thomascs/aj0dvhbm

Jquery toggleClass和CSS动画div宽度

3 个答案: