Jquery toggleClass和CSS的动画div宽度

我试图在鼠标点击时动画相邻的几个div的宽度。被点击的div应该展开（样式为.slide_active），另一个div应该缩小（样式为.slide_inactive）。Jquery toggleClass和CSS的动画div宽度

<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/

来源

2016-11-05 thomascs

感谢您的意见！我可能会因为简化我的问题而困惑你。在我的应用程序中，我使用4个div和3个可能的状态，只有.slide或一个.slide_active和所有其他.slide_inactive。 div的宽度可以是10％，25％或70％。 .filter让我思考，但我用.not代替。这里是工作代码：https://jsfiddle.net/thomascs/aj0dvhbm/ – thomascs

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

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

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

来源

2016-11-06 11:08:14 thomascs

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

来源

2016-11-05 12:02:51 JasonK

那么'.slide_inactive'类呢？ –

那么你可以在'.removeClass（'slide_active'）'后添加'.addClass（'slide_inactive'）'。但想一想;当幻灯片没有活动的课程时，您可以认为它不活动。那么为什么要添加另一个课程呢？ – JasonK

由于OP代码似乎有三种状态，“活动”，“不活动”和两种状态。我同意只有2个状态更有意义，但这不是他显示的内容 –

试试这个，利用hasClass() method检查类由.slide_active类与否。

$('.slide').click(function() { 
 
\t $('.slide').addClass('slide_active'); 
 
    \t $('.slide').removeClass('slide_inactive'); 
 
    if($(this).hasClass('slide_active')){ 
 
    \t $(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>

来源

2016-11-05 12:05:39 frnt

那么'.slide_inactive'类呢？ –

@RoryMcCrossan随着OP问他是否试图在div之间切换，所以我们可以对代码进行更改，并使其使用add和removeClass工作。 – frnt

你可以这样做，

$('.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>

来源

2016-11-05 12:12:42 mmativ

Jquery toggleClass和CSS的动画div宽度

回答

相关问题