jQuery에서 의사 요소 (::before,::after 등)에 변화를 추가합니다 (바람)! !

개요

jQuery에서 "의사 요소에 변화를 더하는 것은 어떻게 할 것인가", "원래 의사 요소는 요소로서 취득할 수 있을까~"라고 조금 고전했기 때문에, 비망록으로서 남깁니다.
세상은 크리스마스이지만, Qiita2 투고 눈에 트라이 해 보므로, 따뜻한 눈으로 봐 주시면 기쁩니다

우선은 데모 동영상을 봐주세요! !


매우 세부적인 점입니다만, Category 와 Color 의 우단에 ▲ 가 있어, 이벤트 발화시 (mouseover), ▼ 가 되어 있습니다.
이 ▲ 및 ▼는 擬似要素::after입니다.
변화가 더해져, 방향이 바뀌고 있는 것처럼 보입니다만, 실제로는 다른 class를 작성해, 이벤트의 발화에 수반해 class의 교환을 하고 있다고 하는 것입니다.
::before , ::after 등의 의사 요소는 DOM 요소가 아니기 때문에, JavaScript로 요소의 취득이나, 변화를 줄 수 없기 때문입니다.
그럼, 순서를 따라 설명합니다.

※ 원래 의사 요소는? 그렇다면 아래 링크를 참조하십시오 .
h tps://사루와카군. 코 m / html-c s / 바시 c / 베후레 - 아 f r

1.Haml, CSS

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

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를 이미지와 같이 2종류 준비해 두는 것이 포인트입니다!
conten의 내용만 변경합니다! !

2.jQuery

아래 jQuery 코드입니다. (jQuery가 사용 가능한 환경에 있다고 가정하고 이야기를 진행합니다.)

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입니다!


③ 변수화 된 .select의 의사 요소를 .toggleClass로 전환하여 구현 완료!

mouseout 때는, 역의 움직임을 하기 때문에 slideDown와 slideUp를 재기록하는 것만으로 OK입니다!

요약

의사 요소에는 직접 변화를 줄 수 없기 때문에, class를 바꾸는 것으로 변화를 더하는(바람)에 실장했습니다!
font-awesome등을 이용하고 있으면, 좀 더 간단하게 실장할 수 있었을까라고도 생각합니다. . .
끝까지 읽어 주셔서 감사합니다

참고