CSSとJQでそれぞれswitch buttonを実現する多種の方法

以前のdemoを書き直すのはとてもいいことです

1、cssでswitch buttonを実現する
基本原理:inputのcheckboxタイプを使用し、inputがマウスでcheckedをクリックするとinput:checked+を通過する.slideの方法はスタイルの中で右に100 px移動させ、マウスが再びinputをクリックしてcheckedされていない場合、スタイルは失効する.slideは元の位置に戻ります.
注意点:CSSスタイルでは+番号の意味で、h 1+pがh 1と同級のラベルのすぐ隣のh 1のpラベルが選択されていることを意味する場合があります.もう一つの注意点はcssの偽クラスです.例えば.slideはinputの隣接する兄弟要素であり、slideがcss偽クラスを使うとき、.slide:beforeも同じように扱われます.slideの隣接兄弟要素.

ここに大きな穴があいている

ここに巨大な穴を挿して、私を丸1日半穴に入れて、丸1日半!transitionの使用については、最初の2つの属性はnameとdurationの2つの属性ですが、position:absolute;の場合、left:100 pxを移行的に実現する.の時、この時この時は注意しなければなりません.それはtransitionのスタイルバーにleft属性とその値が必ず現れ、現れなければallだけ書くと、この移行効果は現れず、現れません!ジェーンは人を殺した!简写は人を杀してああ!!!
ここでtransitionはblock要素のみに有効です.
次に前の例を示します.

input:checked + .slide:before{
      left:50px;
    }
input:checked + .slide{
    background:blue;
}

inputにcheckedされたとき、slideとその偽クラスのスタイルが有効になります.再度クリックして失効して、これは1種の純粋なCSSの方法で、少し巧みです.注意が必要なのはlabelラベルのforです

このように書くメリットは、ラベル自体をクリックするとinputもcheckedされ、もちろん書かなくてもいいので、labelがinputを住めば同じ効果が得られます.

2、jQueryでswitch buttonを実現する二つの方法

この2つの方法は、toggleClass()でclassNameを追加および削除し、もう1つはtoggle()で身の回りのものを表示および非表示にして左右の変位を実現する方法ではありません.

toggleClass()に関する方法

$('.div1').click(function(){
      $('.div1').toggleClass('move')
})

はい.moveに対応する移動を追加すればいいです.

toggle()に関する方法

$('.div3').click(function(){
      $('.div2').toggle()
})

htmlに2つのdivを書き、横に1つのdivに包み、そのうちの1つのdivを表示して隠すことで別のdivの移動を実現します.