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'); 
    }; 
});

これは機能しません。コードの理解が限られているだけで、これを理解しているようには見えません。だから、問題はすべてのスライドはその後、すべてのスライド上でこのクラスを切り替えるslide_inactiveクラスを持っている場合は、チェックしているということです

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

出典

2016-11-05 thomascs

ありがとう！私はあなたの質問を簡素化することによってあなたを混乱させたかもしれません。私のアプリケーションでは、4つのdivsと3つの可能な状態を使用しています.slideのみ、または.slide_activeと他のすべて.slide_inactive。 divは、幅が10％、25％、または70％のいずれかになります。 .filterは私に考えさせましたが、代わりに.notを使用しました。ここに作業コードがあります：https://jsfiddle.net/thomascs/aj0dvhbm/ – thomascs

感謝を行うことができます！私はあなたの質問を簡素化することによってあなたを混乱させたかもしれません。私のアプリケーションでは、4つのdivsと3つの可能な状態を使用しています.slideのみ、または.slide_activeと他のすべて.slide_inactive。 divは、幅が10％、25％、または70％のいずれかになります。

.filterは私の考えを得ましたが、代わりに.notを使用しました。

は、ここで作業コードです：jsfiddle.net/thomascs/aj0dvhbmコメントの

出典

2016-11-06 11:08:14 thomascs

：

私はjsfiddleを作成しました。

はのは、コードを少し変更してみましょう：

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コードには、3つの状態、「アクティブ」、「非アクティブ」、およびその2つのどちらも存在しないようです。私は2州しか持たない方が理にかなっていることに同意しますが、それは彼が表示しているものではありません。 –

がクラスが.slide_activeクラスかで構成されているかどうかを確認するためにhasClass() methodを利用して、これを試してみてください。

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

答えて

関連する問題