CSSの擬似要素::before ::afterをJQueryで変化させてみよう!

2017/05/05

44_1
指定した要素の前後にCSSで擬似的な要素を追加することのできる「::before」と「::after」はテキストの前後にアイコンを表示させたり何かと便利ですよね。
 
私もコーディングするときには、かなりお世話になっています(^^)
 
ただ、JQueryで動きをつけているときに擬似要素もCSS操作したかったのですが、「::before」と「::after」はあくまで擬似的なものなのでJQueryではCSSを直接操作することができませんでした。
 
そこで「class」を追加して擬似要素を変化させてみたので紹介したいと思います!

「::before」と「::after」を使ってコーディング

あとからJQueryで操作するので、よくありそうなアコーディオンをベースにしてコーディングします。

HTML

<div class="wrap">
	<div class="title">アイテム1<span class="icon"></span></div>
	<p class="content">ここにはアイテム1のテキストが入っています。<br>ここにはアイテム1のテキストが入っています。<br>ここにはアイテム1のテキストが入っています。</p>
</div>

CSS

.wrap{
  width: 400px;
  margin: 20px;
}
.title,.content{
  width: 100%;
  margin: 0;
  padding: 10px;
}
.title{
  background: #FFC107;
  font-size: 16px;
  position: relative;
  cursor: pointer;
}
.title span{
  width: 28px;
  height: 28px;
  margin: auto 0;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  background: #fff;
}
.icon::before,.icon::after{
  content: "";
  display: block;
  position: absolute;
  background: #FFC107;
}
.title .icon::before{
  width: 22px;
  height: 2px;
  top: 12px;
  left: 3px
}
.title .icon::after{
  width: 2px;
  height: 22px;
  top: 3px;
  left: 13px;
}
.content{
  background: #FFECB3;
  font-size: 14px;
  display: none;
}

JQuery

$('.title').on('click',function(){
  $('.content').slideToggle('slow');
});

上記の感じでコーディングすると下のようなアコーディオンが出来上がります。

See the Pen Accordion Test by madka (@madka) on CodePen.

「toggleClass」でクリックされたら擬似要素を変化させる

ベースができたところで本題へ進みます。
操作したい擬似要素の元要素に新しいクラス名をJQueryで追加して変化するようにします。追加するクラス名+擬似要素をCSSに書いて今回の場合は「toggleClass」をJQuery側へ追記します。

アニメーションは簡単ですが、クリックをしてアコーディオンが開いたら右の「+」を「-」になるようにCSSとJSを変更してみます。

追加CSS

.hide::after{
  display: none;
}

追加JQuery

$('.icon').toggleClass('hide');

上記のものをベースコードに追加すると下の感じになります。

See the Pen Accordion Test2 by madka (@madka) on CodePen.

これで、アコーディオンが開いたら「+」が「-」になりました!

おまけ

おまけですが、CSSの内容を変えて下のように「×」にアニメーションを変えたりもできます。

See the Pen Accordion Test3 by madka (@madka) on CodePen.

今回はアコーディオンを例にしてみましたが、「::before」と「::after」は他の場面でも利用できる便利なものなので是非いろいろなパターンで変化をさせてコーディングの幅を広げてみてはいかがでしょうか!

About

madka prof

WebLifeTimesはWebデザイナーのMadkaがWeb制作に関連したことや日々のちょっと気になったことなどを調べたり記録しているサイトです。TwitterFacebookで気になったニュース記事をシェアしたり独り言をつぶやいたりしています!

New Post

Recommend