jQueryで擬似要素（::before,::afterなど）に変化を加える（風）！！

## 概要
jQueryで「擬似要素に変化を加えるのってどうやるんだろう」、「そもそも擬似要素って要素として取得できるのかな〜」と少々苦戦したため、備忘録として残します。
世間はクリスマスですが、Qiita2投稿目にトライしてみるので、温かい目で見てくださると嬉しいです:relaxed:

#
まずは、デモ動画をご覧下さい！！
[![Image from Gyazo](https://i.gyazo.com/51f85b90b67112ad1c6f2859e756d552.gif)](https://gyazo.com/51f85b90b67112ad1c6f2859e756d552)

非常に細かい点ですが、`Category`と`Color`の右端に`▲`があり、イベント発火時（mouseover)、`▼`になっております。
この`▲`と`▼`が`擬似要素::after`です。
変化が加わり、向きが変わっているように見えますが、実際は別のclassを作成し、イベントの発火に伴いclassの入れ替えをしているというものです。

**`::before`, `::after`などの擬似要素はDOM要素では無いため、JavaScriptで要素の取得や、変化を与えることが出来ないためです。**
では、順を追ってご説明します。

*※そもそも擬似要素って？という方は以下のリンクを参考にしてみてください:point_up:*
https://saruwakakun.com/html-css/basic/before-after

## 1.Haml, CSS

```haml:left-bar.html.haml
.left-header
  .left-header__lists 
    %ul.nav
      %li
        .select Category　※ここにカーソルが乗るとイベント発火
        %ul#option 
          %li
            = link_to  outer_items_path do
              = fa_icon "square-o"
              Outer
          %li
            = link_to tops_items_path do
              = fa_icon "square-o"
              Tops
          %li
            = link_to bottoms_items_path do
              = fa_icon "square-o"
              Bottoms
          %li
            = link_to shoes_items_path do
              = fa_icon "square-o"
              Shoes
          %li
            = link_to goods_items_path do
              = fa_icon "square-o"
              Goods
```
```css:left-bar.css
.left-header{
  width: 250px;
  height: 650px;
  padding: 40px 30px 0 70px;
  position: relative;
  &__lists{
    width: 120px;
    height: 400px;
  }
  .nav {
    margin-bottom: 30px;
    position: relative;
    cursor: pointer;
  }
  .select{
    color: $black;
    font-family: $main-font;
    @include border-line;
    font-size: X-large;
    font-weight: bold;
  }
  #option{
    text-decoration: none;
    list-style: none;
    font-size: large;
    display: none;
    font-family: $main-font;
    li{
      a{
        color: $black;
        font-size: 21px;
      }
      .fa{
        color: $black;
      }
    }
    }
  }　今回のポイントはここです！！⇩
  .select:after{
    position: absolute;
    content: "▼";
    font-size: 12px;
    right: 0;
    bottom: 1px;
    color: #9a8478;
    }
  .select_a:after{
    position: absolute;
    content: "▲";
    font-size: 12px;
    right: 0;
    bottom: 1px;
    color: #9a8478;
  }
```

**selectの擬似要素::afterを画像のように２種類用意しておくことがポイントです！
contenの中身だけを変更します！！**


## 2.jQuery
以下jQueryのコードです。(jQueryが使用可能な環境になっているという前提で話を進めます。)

```javascript:left-bar.js
$(function(){
	$(document).on("turbolinks:load", function(){
		var nav = $(".nav");
		$("li", nav)
		.mouseover(function(e){
			$("ul",this).stop().slideDown("fast"); ①
			var select = $(this).children(".select")[0];②
			$(select).toggleClass("select_a");③
		})
		.mouseout(function(e){
			$("ul", this).stop().slideUp("fast");
			var select = $(this).children(".select")[0];
			$(select).toggleClass("select_a");
		});
	})
})
```
**①`.nav`の`%li`、つまり`.select`にマウスカーソルが乗った時、子要素の`%ul#option`をスライドによって表示させます。**

**②mouseoverされた`.select`のDOM要素を取得し、変数化します。**
console.logで下記画像の様に取得出来ていればOKです！
[![Image from Gyazo](https://i.gyazo.com/bb6f30681b4281d900ce9d4874bbe088.png)](https://gyazo.com/bb6f30681b4281d900ce9d4874bbe088)

**③変数化された`.select`の擬似要素を`.toggleClass`で切り替えて実装完了です!:ok_hand:**

*mouseoutの時は、逆の動きをするので`slideDown`と`slideUp`を書き換えるだけでOKです！*


## まとめ
擬似要素には直接変化を与える事が出来ないので、classを切り替える事で変化を加える(風)に実装しました！
font-awesomeなどを用いていれば、もう少し簡単に実装出来たのかなとも思います。。。
最後まで読んで下さりありがとうございました:relaxed:

## 参考
https://idotdesign.net/blog/web/js/non-dom-before-after/